Question

I have a unoderderd list with li elements and when i hover the mouse on one element i want to hide the other elements. How can i do this with jquery.

<ul class='sidebar-iproducts-ul'>
    <li>IPuzzles</li>
     <li>IPuzzles</li>
     <li>IPuzzles</li>
     <li>IPuzzles</li>
     <li>IPuzzles</li>
     <li>IPuzzles</li>
</ul>

Answer 1

Check out this fiddle

The JS

$('ul.sidebar-iproducts-ul li').mouseover(function(){
    $(this).siblings().css('visibility', 'hidden');
});

$('ul.sidebar-iproducts-ul li').mouseout(function(){
    $(this).siblings().css('visibility', 'visible');
});

The STYLE

li{
 display: block;
 width: 100px; 
}