更新

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...这是一个绑定了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/

检测元素是否未悬停5秒钟

更新

1 个答案: