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

Question

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/

Answer 1

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

Answer 2

Try this out:- http://jsfiddle.net/adiioo7/w3Gha/1/

Use $('.item iframe') instead of $('.item').

JS:-

$('.item iframe').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');
});