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。

Working Fiddle