Enable hover event after certain time [duplicate]

Question

I would like to disable hover event on an anchor tag via jQuery for a certain interval.

example: I've got some CSS styles for a hover effect on anchor (< a href="">) element. When I hover the element I want it to wait certain time (500ms or so) and then to start rendering the hover effect.

Something like this maybe?

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

Answer 1

I checked recently, and it's 2015, this means that you can use CSS3 for this.

The following will start animating background color of all links after 500ms.

No jQuery or any JavaScript needed.

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>

If, however you absolutely need to do that with JavaScript, you can use setTimeout in to apply a hovered class to the element:

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>