如何阻止jQuery匹配多个元素
我正试图用jQUery创建一个滚转效果。然而，我也有类似的事情，因为我试图用一个有链接的对象做鼠标操作，我遇到了问题。
我有个二级导航吧。占位符的是表格单元格(我知道不好--但它已经这样做了)。我想把背景从白色(#FFF)改为深灰色(#999)。我也想把文字从深灰色改为白色。
因为文本是一个链接，所以我必须在链接标记中指定一个类，以确保它是深灰色的，没有下划线，并且不默认为蓝色的带下划线的文本。
我编写的代码导致class="subLink“的所有链接在”悬停“时从灰色变为白色。我只希望这种情况发生在特定的项目中--即背景应该变成灰色，链接应该变成白色。
HTML和jQuery如下：-
<td class="subMenuTD"><a href="newsletter.html" class="subLink">Newsletter</a></td>
<td class="subMenuTD"><a href="news_archive.html" class="subLink">News Archive</a></td>
<td class="subMenuTD"><a href="events.html">Events</a></td>$(".subMenuTD").hover(
function() {
$(this).addClass("subMenuTDActive");
$(".subLink").addClass("subLink-white");
},
function() {
$(this).removeClass("subMenuTDActive");
$(".subLink").removeClass("subLink-white");
}
);回答 5
Stack Overflow用户
发布于 2009-07-23 08:42:53
向$()函数添加上下文参数。
$(".subLink") --> $(".subLink", this)将使jQuery只匹配“.subLink”，后者是给定上下文元素的子元素。
Stack Overflow用户
发布于 2009-07-23 08:49:44
您可以通过不将类添加到链接中来简化这一点，因为您已经在将类添加到父td中，因此可以通过使用CSS来锁定链接：
代码在之前
$(".subMenuTD").hover(
function() {
$(this).addClass("subMenuTDActive");
$(".subLink").addClass("subLink-white");
},
function() {
$(this).removeClass("subMenuTDActive");
$(".subLink").removeClass("subLink-white");
}
);编码后的
$(".subMenuTD").hover(
function() {
$(this).addClass("subMenuTDActive");
},
function() {
$(this).removeClass("subMenuTDActive");
}
);新CSS规则
.subMenuTDActive .subLink {
/* Add hover link styling here */
}这将起作用，因为".subMenuTDActive .subLink“比".subLink”具有更高的特异性，因此将覆盖".subLink“规则。
Stack Overflow用户
发布于 2009-07-23 09:10:35
我是干症组的。当你只使用css的时候，你到底为什么要使用javascript呢？
.subMenuTD:hover {
background-color: #ccc;
}
.subLink:hover {
color: #fff;
}或者更好的(我认为)，去掉不应该并且应该删除的td元素的样式，将链接设置为display:block，然后可以在一个元素下面声明悬停样式：
.subLink {
display: block;
}
.subLink:hover {
background-color: #ccc;
color: #fff;
}除非您无法控制html，或者您有一些关键任务--依赖于保持不变的标记，“它已经在使用表了，我知道，起诉我”是一个非常糟糕的借口。这是你的子菜单，无纸桌：
<ul class="subMenu">
<li><a href="newsletter.html">Newsletter</a></li>
<li><a href="news_archive.html">News Archive</a></li>
<li><a href="events.html">Events</a></li>
</ul>大约花了30秒。下面是导航条/滚转的CSS：
.subMenu li {
display: inline;
list-style: none;
}
.subMenu a {
color: #000;
background-color: #fff;
text-decoration: none;
display: block;
}
.subMenu a:hover {
color: #fff;
background-color: #ccc;
}那可能花了一分钟时间，因为我得让它看起来很漂亮。
我不是想成为一个恶霸，也不是对你施加压力，但是非语义代码是不应该鼓励的，如果你在寻求帮助的话，我觉得给它不对，因为我知道它将被用于一个不符合标准的网站。
https://stackoverflow.com/questions/1170449
复制相似问题
腾讯云开发者
