检测一个元素是否已经悬停了5秒

Question

我有一个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);

});

更新

在迄今所提供的意见和答复的帮助下，我提出了这一点。然而，即使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

}

Answer 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... --这是一个绑定鼠标和鼠标离开的处理程序，在我看来是令人困惑的。我更喜欢只使用鼠标，或者使用悬浮()函数。所以我把你的代码改为

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/