Question

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

示例：我有一些CSS样式用于锚点（＆lt; a href =“”＆gt;）元素的悬停效果。当我悬停元素时，我希望它等待一定时间（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将hovered类应用于元素：

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 );
   })
})

DEMO： http://jsfiddle.net/faj81qa0/

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

2 个答案: