Remove visability on <li> tags except (this) on hover in a menu

Question

Hi all,

As topic says, I want to remove the visability while i hover a list on every <li> element except the one I hover.

This should be pretty simple i believe but I can't figure it out.

Here is my markup:

<ul>
    <li class="item1"><a href="#">ITEM 1</a></li>
    <li class="item2"><a href="#">ITEM 2</a></li>
    <li class="item3"><a href="#">ITEM 3</a><li>
    <li class="item4"><a href="#">ITEM 4</a></li>
</ul>

and here are the jQuery (that doesn't work):

$(document).ready(function(){
    $("li").hover(function(){
    $("li a").not(this).css("visibility", "hidden"); 
    });
});

Something is wrong...

Thanks!

Answer 1

Your .not(this) won't work because this is an li element but you're selecting a elements.

You can do it like this (added code to unhide on hover out):

$(document).ready(function(){
    $("li").hover(function(){
    $("li a").not($('a', this)).css("visibility", "hidden");
    }, function(){
    $("li a").css("visibility", "visible");
    });
});

Also you have a typo in your HTML - an <li> where there should be a </li>.