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

JQuery悬停循环

1 个答案: