Question

当我将鼠标悬停在我网站上的图片上时，我想要一个特定的文字。这一切都运行良好我唯一的问题是，我想只有当光标在图像上1秒时触发悬停，所以网站不会得到所有弹性和东西。问题是我无法使其工作。以下是此Fiddle

中的简单版本

HTML：

<ul id="nav">
<li ><a href="#">Header 1 &darr;</a>
<ul>
<li><a href="#">content</a></li>
</ul>
</li>
</ul>

CSS：

    #nav {
    padding: 40px;
    border: solid #999 1px;
}
#nav ul {
    margin: 0;
    padding: 0;
    display: none;
    background-color: #CCC;
}
#nav ul li {
    margin: 0;
    list-style: none;
    list-style-type: none;
    padding: 5px;
    width: 40px;
}
#nav a {
    color: black;
    text-decoration: none;
    padding: 5px;

}
#nav a:hover {
    text-decoration: none;
}

JS：

   var config = {  
      timeout: 1500,
     over: function () { //onMouseOver callback 
        $('ul', this).slideDown(500);//show its submenu

    },    
    timeout: 1500, // milliseconds delay before onMouseOut   
    out: function () { // function = onMouseOut callback 
        $('ul', this).slideUp(1500); //hide its submenu        
    }     
};
$('#nav li').hoverIntent(config);

Answer 1

jquery.hoverDelay.js是一个jQuery插件，它正是这样做的。它使您可以设置延迟悬停效果（您可以为“in”和“out”回调设置不同的延迟）。最重要的是，我写了： - ）

在此处查看演示：http://ronency.github.io/hoverDelay/

JS用法

$('#demo-menu li').hoverDelay({
    delayIn: 200,
    delayOut:700,
    handlerIn: function($element){
        $element.css({backgroundColor: 'red'});  
    },
    handlerOut: function($element){
        $element.css({backgroundColor: 'auto'});  
    }
});

Answer 2

您正在使用的hoverIntent插件有一个名为interval的方法。我考虑使用它。

interval: 1000,
timeout: 500 // milliseconds delay before onMouseOut

jsFiddle

来自文档：

间隔： hoverIntent在读取/比较鼠标坐标之间等待的毫秒数。当用户的鼠标首先进入该元素时，记录其坐标。最快的＆＃34; over＆＃34;可以在单个轮询间隔之后调用函数。将轮询间隔设置得更高会增加第一个可能的延迟之前的延迟＃34;呼叫，但也增加了下一个比较点的时间。默认间隔：100

延迟处理悬停事件

2 个答案: