JQuery悬停循环

Question

我有这个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

注意:我希望悬停的项目向左移动,而不是保持固定.

Answer 1

你正在使用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。

工作小提琴