如何淡出悬停 link 的邻居？

Question

如果我不是第一次问这个问题，我非常抱歉......

我希望如果我将鼠标悬停在 a 元素上，它的邻居会变成灰色或淡出一点。这是我的 jsfiddle

<ul id="nav">
    <li><a href="">Start</a></li>
    <li><a href="">Produktion</a></li>
    <li><a href="">Galerie</a></li>
    <li><a href="">Support</a></li>
    <li><a href="">Kontakt</a></li>
    <li><a href="">Bestellen</a></li>
</ul>

$("#nav > li > a").hover(function(){
    $(this).parent().nextAll("li").css("color", "gray");
});

如果你能帮助我，我非常感谢（抱歉英语不好）！

Answer 1

$("#nav > li > a").hover(function(){
  $(this).css("color", "green").parent().siblings().find("a").css("color", "gray");
});

我相信你希望在悬停时改变其他 li>a 的颜色，所以使用 siblings() 就可以了。

工作Fiddle：https://jsfiddle.net/68797by9/1/

Answer 2

您可以在未使用 .toggleClass() 悬停的链接上切换 class。

$("#nav > li > a").hover(function(){
  $('#nav > li > a').not(this).toggleClass('toggle');
});

这是一个工作fiddle供参考

如何淡出悬停 link 的邻居？

How to fade out neighbors of a hovered link?

navigation

jquery

hover