Question

我遇到的问题是，当元素通过jQuery :hover远离鼠标动画时，元素不会丢失animate()。

:hover一直保持应用，直到移动鼠标。有没有办法阻止这种行为？
它似乎发生在IE，Chrome和Firefox中。

Answer 1

有一种方法可以删除悬停状态，但它可能无法在所有浏览器上运行并且有其缺点。

秘密武器是CSS属性pointer-events。如果将其值设置为none，则该元素不再接收鼠标事件。如果它处于悬停状态，它将失去该状态（在Chrome和Safari中测试）。

仅当鼠标指针仍在元素上时，才能删除悬停状态。因此，如果您在动画开始之前执行此操作，您将看到根本没有悬停状态或短暂闪烁，具体取决于浏览器。

如果您遇到问题，则需要计算超时或使用progress .animate()处理程序来获得正确的时机。

Answer 2

您可以使用超时功能提供其他功能或事件。

$("#box").one("mouseenter",function(){
    var $this = $(this);
    $(this).css('color','green');
    window.setTimeout(function(){
        $this.css('color','red');
    },300);
})

这种方法在不离开悬停状态的情况下工作。我不知道这种方法对你有用..

Answer 3

我遇到了同样的问题。 jquery animate函数将元素从鼠标光标下移出，因此不会接收将:hover状态重置为off的mousemove或mouseleave事件。

我发现我无法使用CSS伪类选择器，而是必须依赖jquery hover() api方法手动添加/删除单独的CSS类。

$('li.hoverable').hover(
    function () { $(this).addClass('hovering'); },
    function () { $(this).removeClass('hovering'); });

之后

// animate back to the final position
elem.animate({ top: 0, left: 0 }, 400, "easeInOutCubic",
    function () { elem.removeClass('hovering'); });

停止“：悬停”元素在使用jQuery动画远离光标时保持其状态？

3 个答案: