将鼠标悬停在一个列表项上时隐藏其他列表元素

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

STYLE

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