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

您对 li 元素使用了 float: left.. 所以 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