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

Question

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

Answer 2

var $items = $("ul.sidebar-iproducts-ul").children("li");
$items.hover(function () {
    $items.fadeOut();
    $(this).show();
});

也许它会对你有帮助。

Answer 3

也许你可以写这个

$('.sidebar-iproducts-ul li').hover(function(){
    $('li').css('display', 'none');
    $(this).css('display', 'block');   
});