javascript - 将鼠标悬停在一个列表项上时如何隐藏其他列表项？

Question

我有一个包含 li 元素的 unoderderd 列表，当我将鼠标悬停在一个元素上时，我想隐藏其他元素。我怎样才能用 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

看看这个 fiddle

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');
});

风格

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