我有这个
JQuery代码的问题：
$(".item").mouseenter(function(){
$(this).addClass("active");
$(this).removeClass("item");
$(".item").hide(700);
}).mouseleave(function(){
$(this).stop();
$(this).addClass("item");
$(this).removeClass("active");
$(".item").show(700);
});
这是我的HTML：
<ul>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
</ul>
我想当我悬停在一个项目上,其他项目隐藏,代码工作正常但问题就在那里,如果我在隐藏持续时间(700毫秒)中悬停另一个项目,它将创建一个隐藏/显示项目的循环.我该怎么做才能防止这种情况发生.
jsFiddle
注意：我希望悬停的项目向左移动,而不是保持固定.
解决方法
你使用float：left到li元素..所以ul没有宽度和高度.应用此CSS：
ul {
overflow: auto;
}
并且我在jQuery中做了一些更改：
$(".item").on('mouseenter',mEnter)
$('ul').on('mouseleave',function () {
$('.item').stop();
$('.active').removeClass("active")
.addClass("item");
$(".item").show(700);
});
function mEnter() {
$(this).addClass("active");
$(this).removeClass("item");
$(".item").hide(700);
}
您正在将mouseleave事件应用于单个悬停的LI元素而不是父元素,即UL.
Working Fiddle