jquery - 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。

工作小提琴