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

我有一个包含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>

伊普兹尔斯
伊普兹尔斯
伊普兹尔斯
伊普兹尔斯
伊普兹尔斯
伊普兹尔斯

也许会对你有所帮助。

看看这个

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

---

也许你可以写这个

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

---

此解决方案有效，但当前项一直闪烁。我认为悬停事件被称为“重复”，这是一个可行的方法，但我真正想要的是“不显示”和“阻止”，而不是“可见性”“隐藏”和“可见”。当我使用display属性时，它不起作用。请继续闪烁mm，您必须在CSS中处理它。想要的效果是什么？之所以会出现闪烁效果，是因为当你在鼠标上方移动鼠标时，鼠标就会被触发，我唯一能绕过它的方法就是通过显示器：block@EliseuMonar我想做的是当我将鼠标移到一个项目上时，隐藏其他元素并显示关于该元素的描述。当然，忘了我说过的显示：块。我使用visibility属性是因为它不会触发您看到的闪烁（mouseover/mouseout）问题。有了可见性，我只是让它不可见，有了display:none，我在某种程度上从DOM中删除了元素，导致li元素移到顶部并触发mouseout事件。但是这个方法在mouseover上有一些问题。它一直在闪烁

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