如何制作一个更长时间的鼠标悬停棒

How do I make a mouseover stick for a longer period of time?

本文关键字：长时间 鼠标 悬停 一个 何制作      更新时间：2023-09-26

这是我的代码：

$(function() {
$("#page-flip").mouseover(function() { 
    $(".box").toggleClass("box-change");
    $(".films").toggleClass("films-change");
    $(".synopsis").toggleClass("synopsis-change");
});
});

它工作得很好，但鼠标悬停有点坐立不安。我希望它能坚持更长的时间，并且在第一次触发时不要退缩。例如，如果用户正在快速移动他/她的鼠标，它应该完全释放或根本不释放，而不是半步。有什么想法吗？

我认为暂停是一种方法，但我已经尝试过了，现在类不会切换。

function myMouseOver() 
{
    $(".box").toggleClass("box-change");
    $(".films").toggleClass("films-change");
    $(".synopsis").toggleClass("synopsis-change");
}
$("#page-flip").mouseover(function() { 
          var t = setTimeout("myMouseOver()",1500);
});

要延迟javascript执行，可以使用setTimeout或setInterval

试试这个：

function myMouseOver()
{
    $(".box").toggleClass("box-change");
    $(".films").toggleClass("films-change");
    $(".synopsis").toggleClass("synopsis-change");
}

$("#page-flip").mouseover(function() { 
  var t = setTimeout("myMouseOver()",1500);
});

我为你做了一个jsFiddle，告诉我这是否是你的想法：http://jsfiddle.net/alexpeta/fWakf/5/

您是否尝试使用mouseenter事件而不是mouseover事件？它被设计为仅当光标进入元素的区域时触发，而不是当您mouseover一个子元素，然后mouseout该子元素时：

$(function() {
    $("#page-flip").mouseenter(function() { 
        $(".box").toggleClass("box-change");
        $(".films").toggleClass("films-change");
        $(".synopsis").toggleClass("synopsis-change");
    });
});

在js.fiddle上尝试此代码。此函数将以一致的行为模拟mouseover。

$(function() {
$("#page-flip").mouseenter(function() { 
    $(".box").toggleClass("box-change");
    $(".films").toggleClass("films-change");
    $(".synopsis").toggleClass("synopsis-change");
})
$("#page-flip").mouseleave(function() { 
    $(".box").toggleClass("box-change");
    $(".films").toggleClass("films-change");
    $(".synopsis").toggleClass("synopsis-change");
})
});

您正在寻找hoverIntent插件，它可以为您消除鼠标悬停事件。

$(selector).hoverIntent(hoverCallback, leaveCallback);
相关文章：