在一定时间后启用悬停事件

Question

我想通过 jQuery 禁用锚标记上的悬停事件一段时间。

示例：我有一些 CSS 样式用于锚点 () 元素上的悬停效果。当我悬停元素时，我希望它等待一定时间（500 毫秒左右），然后开始渲染悬停效果。

也许是这样的？

$("#navigation").hover(function () {
        $("li.has-submenu").off('hover');
        setTimeout(function () {
            $("li.has-submenu").on('hover');
        }, 1000);
    });

Answer 1

我最近查了一下，现在是2015年，这意味着你可以用CSS3来做这个。

以下将在 500 毫秒后开始为所有链接设置动画背景颜色。

不需要 jQuery 或任何 JavaScript。

a {
  -webkit-transition: all 500ms ease-in;
  -moz-transition: all 500ms ease-in;
  -ms-transition: all 500ms ease-in;
  -o-transition: all 500ms ease-in;
  transition: all 500ms ease-in;
}

a:hover {
  background-color: #c00;    
  transition-delay: 500ms;
}

<a href="">Hover me</a>

如果您绝对需要使用 JavaScript 来做到这一点，您可以使用 setTimeout 将悬停的 class 应用于元素：

jQuery(function($) {
  $("a").hover(function() {
    var el = $(this);
    var timeout = setTimeout(function() {
      el.addClass("hover");
    }, 500);
    el.data("timeout", timeout);
  }, function() {
    clearTimeout($(this).removeClass("hover").data("timeout"));
  });
});

a {
  -webkit-transition: all 500ms ease-in;
  -moz-transition: all 500ms ease-in;
  -ms-transition: all 500ms ease-in;
  -o-transition: all 500ms ease-in;
  transition: all 500ms ease-in;
}

a.hover {
  background-color: #c00;    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="">Hover me</a>

Answer 2

我猜你想要这样的东西：

<div id='a' style="border:2px solid black" >
       <h3>Hove On me</h3>
           For 2000 milliseconds. You will get an alert.
       </br>
</div>




$(document).ready(function(){
   var delay=2000, setTimeoutConst;
   $('#a').hover(function(){
        setTimeoutConst = setTimeout(function(){
            /* Do Some Stuff*/
           alert('Thank You!');
        }, delay);
   },function(){
        clearTimeout(setTimeoutConst );
   })
})

演示： http://jsfiddle.net/faj81qa0/

在一定时间后启用悬停事件

Enable hover event after certain time

html

javascript

css

jquery

hover