javascript - jQuery/CSS - 将鼠标悬停在具有相同 href 的元素上时更改 css 类

Question

我有两个单独的 UL 作为菜单。当我悬停第一个菜单项时，我希望第二个菜单项更改文本颜色。也许是一个解决方案，其中与您悬停的链接具有相同 href 的链接更改 css 类？我如何使用 jQuery 做到这一点？

<ul class="firstMenu jQueryHover">
 <li><a href="href1">bla</a></li>
 <li><a href="href2">bla2</a></li>
</ul>

<ul class="secondMenu">
 <li><a href="href1">blabla (same href as firstMenu item you hovered changes this elements css class)</a></li>
 <li><a href="href2">blabla (same href as firstMenu item you hovered changes this elements css class)</a></li>
</ul>

Answer 1

如果你想影响所有具有相同 href 的链接，包括悬停在上面的链接:

$("a").hover(function() {
    $("a[href='" + $(this).attr("href") + "']").addClass("yourClass"); 
}, function() {
    $("a[href='" + $(this).attr("href") + "']").removeClass("yourClass");
});

这利用了 attribute name selector , 以查找与当前悬停链接具有相同 href 的所有链接。

这是一个有效的 example .

如果你想让它只改变其他链接(而不是悬停的链接)，那么你可以使用 jQuery not排除悬停元素的方法。从您的问题中不清楚您是希望更改具有相同 href 的所有链接，还是更改所有其他链接但不是当前悬停的链接。

$("a").hover(function() {
    $("a[href='" + $(this).attr("href") + "']").not(this).addClass("yourClass");
}, function() {
    $("a[href='" + $(this).attr("href") + "']").not(this).removeClass("yourClass");
});