Question

i'm very sorry if I ask this not for the first time...

I wish that if I hover an a-element, that the neighbors of it becomes gray or fade out a little bit. Here is my 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");
});

Im very thankful if u can help me (and sorry for the bad english)!

Answer 1

You can toggle a class on the links that are not hovered using .toggleClass().

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

Here is a working fiddle for reference

Answer 2

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

I believe you expect, to change the color of other li>a when hovered, so use of siblings() will play the trick.

Working Fiddle : https://jsfiddle.net/68797by9/1/

How to fade out neighbors of a hovered link?

2 个答案: