Search code examples
jqueryhovermouseentermouseleave

When items are hovered fast they're not returning to its default state

With reference to this question

When mouseenter on each item, its overlay disappearing, when mouseleave - the overlay shows.

When I have more items, and fast hovering on them randomly, they're not returning to it's previous state. It's quite annoying :/

Why is that?

 $('.item').mouseenter(function () {
var $this = $(this);
setTimeout(function () {
    $this.find('.item-overlay').css('z-index', '-1');
}, 300);
 }).mouseleave(function () {
$(this).find('.item-overlay').css('z-index', '1');
 });

http://jsfiddle.net/w3Gha/

Solution

  • Try with hover(): http://jsfiddle.net/KfS9H/

      $(".item").hover(
      function () {
           $(this).find('.item-overlay').stop().css('z-index', '-1');
      },
      function () {
           $(this).find('.item-overlay').stop().css('z-index', '1');
      }
  );