Скрыть другие элементы списка при наведении на один элемент списка

Question

У меня есть список unoderderd с элементами 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

Проверьте это скрипка

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