悬停没有第二DOM对象消失马上

目标：对象用户将鼠标悬停在以弹出次级DOM
工具提示：固定DOM对象定位在10-15px下面目标悬停没有第二DOM对象消失马上

我做了一个jquery “tooltip”插件。该插件允许用户通过DOM对象将悬停，并且将显示“工具提示”。我希望用户能够将鼠标从目标移动到工具提示，而不会消失第二个鼠标离开目标。

我已经试过这样：

var hoverTimeout; 

       data.target.hover(function(){ 
        $this.tooltip('show'); 
       }, function(){ 

        hoverTimeout = setTimeout(function(){ 
         $this.tooltip('hide'); 
         console.log('hey'); 
        }, 1000); 

       }); 

       data.tooltip.hover(function(){ 
        data.tooltip('show'); 
        clearTimeout(hoverTimeout); 
       }, function(){ 
        data.tooltip('hide'); 
       });

然而，这似乎从隐藏停止工具提示。我想这样做的原因是，在工具提示中可以使用表单，文本可以复制等。

我希望像setTimeout和clearTimeout的工作，因为我不想使用hoverintent插件。

非常感谢你提前！

来源

2012-03-14 iRedMedia

var hoverTimeout; data.target.hover（函数（） { \t $ this.tooltip（ '节目'）; \t clearTimeout（hoverTimeout）; }，函数（） { \t hoverTimeout = setTimeout的（函数（）{ \t \t $ this.tooltip（'hide'）; \t}，1000）; }）; data.tooltip.hover（函数（） { \t $ this.tooltip（ '节目'）; \t clearTimeout（hoverTimeout）; }，函数（） { \t hoverTimeout = setTimeout的（函数（）{ \t \t $ this.tooltip（'hide'）; \t}，1000）; }）; – iRedMedia 2012-03-14 17:52:27

你应该使用定时器两种方式：

var hoverTimeout; 

data.target.hover(function() 
{ 
    hoverTimeout && clearTimeout(hoverTimeout); 
    $(this).tooltip('show'); 
}, 
function() 
{ 
    var $this = $(this); 
    hoverTimeout = setTimeout(function(){ 
     $this.tooltip('hide'); 
    }, 1000); 

}); 

data.tooltip.hover(function() 
{ 
    hoverTimeout && clearTimeout(hoverTimeout); 
}, 
function() 
{ 
    var $this = $(this); 
    hoverTimeout = setTimeout(function(){ 
     $this.tooltip('hide'); 
    }, 1000); 
});

你应该combine the two，因为你好歹做他们两个完全一样的事情：

var hoverTimeout; 

data.target.add(data.tooltip).hover(function() 
{ 
    hoverTimeout && clearTimeout(hoverTimeout); 
    $(this).tooltip('show'); 
}, 
function() 
{ 
    var $this = $(this); 
    hoverTimeout = setTimeout(function(){ 
     $this.tooltip('hide'); 
    }, 1000); 

});

来源

2012-03-14 16:20:55

也许您甚至可以将超时设置为超过一秒，以防用户无法快速将鼠标移到工具提示上？ – huzzah 2012-03-14 16:35:51

非常感谢。它非常接近对象。如果他们花更多的时间，他们不应该使用我的应用程序;）哈哈只是在开玩笑:)。但是，一秒就足够了。我不确定你为什么重新定义这个，因为这导致了一个错误。我还发现我的代码是90％正确的。我错过了代码中其他地方的.hide（），这就是为什么它不会消失。非常感谢你！ – iRedMedia 2012-03-14 16:46:23

你能解释这部分吗？ hoverTimeout && clearTimeout（hoverTimeout）; – iRedMedia 2012-03-15 13:26:49

var hoverTimeout; 

data.target.hover(function() 
{ 
    $this.tooltip('show'); 
    clearTimeout(hoverTimeout); 
}, function() 
{ 
    hoverTimeout = setTimeout(function(){ 
     $this.tooltip('hide'); 
    }, settings.delay); 
}); 

data.tooltip.hover(function() 
{ 

    clearTimeout(hoverTimeout); 
}, function() 
{ 
    hoverTimeout = setTimeout(function(){ 
     $this.tooltip('hide'); 
    }, settings.delay); 
});

来源

2012-03-15 13:24:45 iRedMedia

悬停没有第二DOM对象消失马上

回答

相关问题