一定时间后启用悬停事件

Question

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

示例：我有一些CSS样式可用于对锚（<a href =“”>）元素进行悬停效果。当我将元素悬停时，我希望它等待一段时间（大约500毫秒），然后开始渲染悬停效果。

像这样的东西？

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

Answer 1

我最近检查了一下，现在是2015年，这意味着您可以为此使用CSS3。

在500ms之后，以下将开始为所有链接设置背景色动画。

无需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来将悬浮的类应用于元素：

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/