【问题标题】：Detect if an element has not be hovered over for 5 seconds检测元素是否悬停 5 秒
【发布时间】：2013-11-13 17:38:01
【问题描述】：

我有一个hover 事件，它删除了一个小按钮，并在它悬停时将其替换为完整的菜单栏。

我想做的是，如果鼠标没有悬停在菜单栏 (this.element) 上 5 秒（每次发生hover 事件时重置计时器），反向发生。

this.button.on('hover', function(e){

    t.admin_bar.show('slide', { 'direction': t.options.position }, 500);
    t.button.hide('slide', { 'direction': t.options.position }, 500);

});

更新

在迄今为止提供的 cmets 和答案的帮助下，我想出了这个。但是，即使 mouseenter 和 mouseleave 事件正常工作，clearTimout() 似乎也没有工作，因为管理栏仍处于隐藏状态。

_create_events : function(){

    var t = this;   // This object

    t.admin_bar = t.element

    /** Capture when the mouse is hovered over the 'Show admin bar' button */
    t.button.on('hover', function(e){

        t._show_admin_bar();
        t._set_timeout();   // Start a new timeout (to hide the admin bar if it's not hovered on)

    });

    /** Capture when the mouse is hovered over the admin bar */
    t.admin_bar.on('mouseenter', function(e){

        clearTimeout(t.timer);  // Clear the existing timeout

    });

    /** Capture when the mouse leaves the admin bar */
    t.admin_bar.on('mouseleave', function(e){

        t._set_timeout();   // Restart the timout

    });

}, // _create_events

_set_timeout : function(){

    var t = this;   // This object

    t.timer = setTimeout(function(){
        t._hide_admin_bar();
    }, 5000);

}, // _timeout

_show_admin_bar : function(){

    this.admin_bar.show('slide', { 'direction': this.options.position }, 500);  // Show the admin bar
    this.button.hide('slide', { 'direction': this.options.position }, 500);     // Hide the 'Show admin bar' button

}, // _show_bar

_hide_admin_bar : function(){

    this.admin_bar.hide('slide', { 'direction': this.options.position }, 500);  // Hide the admin bar
    this.button.show('slide', { 'direction': this.options.position }, 500);     // Show the 'Show admin bar' button

}

【问题讨论】：

神秘消失的 UI 元素。未来的用户界面。
在悬停退出函数中设置一个超时时间来满足你的需要。并让悬停处理函数清除超时。
@Barmar - 谢谢，setTimeout() 看起来是要走的路。现在只是想知道如何正确使用它！谢谢。
看看我下面的回答，它会告诉你如何使用它。它只是伪代码，所以你必须添加隐藏和显示，但超时代码在那里。
你会做一个小提琴吗？您编写所有这些代码的方式使其更难遵循，我认为您在引用 t.timer 时遇到了问题。

标签： jquery events dom hover

【解决方案1】：

你可以试试...

var timer;
function hide(){
    //Hide your menu bar
}
function show(){
    //Show your menu bar
}

$("#buttonID").hover(
  function() {
    clearTimeout(timer);
    show();
  }, function() {
    timer = setTimeout(function(){hide()},5000);
  }
);

更新：

问题在于您调用.on("hover" function... 这是一个绑定mouseenter 和mouse leave 的处理程序，在我看来是令人困惑的。我更喜欢只使用 mouseenter 或 hover() 函数。所以我把你的代码改成了

t.button.on('mouseenter', function (e) {
    t._show_admin_bar();
    t._set_timeout(); // Start a new timeout (to hide the admin bar if it's not hovered on)
 });

http://jsfiddle.net/KdStd/1/

【讨论】：

setTimeout(hide,5000)
你对on.('hover', ... 的评价让我深思。我的问题是，当您在滑开时将鼠标移到显示按钮上时，timeout 再次启动，导致一些时髦。我现在检查以确保事件只触发一次，然后在再次显示显示按钮时重置。为此，我使用函数_can_show()。可能有一个更优雅的解决方案，我会继续努力，但这似乎目前可行。更新小提琴 - jsfiddle.net/KdStd/2
@DavidGard 我觉得不错。如果您需要更多帮助，请告诉我。