在一定时间后启用悬停事件[重复]答案

【问题标题】：Enable hover event after certain time [duplicate]在一定时间后启用悬停事件[重复]
【发布时间】：2015-09-21 07:31:55
【问题描述】：

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

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

可能是这样的吗？

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

【问题讨论】：

不是重复的。这个问题有更多的解决方案，甚至与 JavaScript 无关。
对于纯 CSS 解决方案，您可以使用 CSS3 过渡，如下所述：stackoverflow.com/questions/9393125/…
是的，我知道 CSS3 解决方案，但由于某些原因，我无法在我的网页中使用它。我需要完全禁用悬停事件一段时间。

标签： javascript jquery html css hover

【解决方案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;
}

&lt;a href=""&gt;Hover me&lt;/a&gt;

如果您绝对需要使用 JavaScript 执行此操作，则可以使用 setTimeout in 将悬停类应用于元素：

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>

【讨论】：

是的，我知道这个解决方案，但由于某些原因，我无法在我的网页中使用它。我需要在一段时间内完全禁用悬停事件。还是谢谢！
该死，添加 jQuery 解决方案为时已晚 :)

【解决方案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/

【讨论】：