jquery - アイテムをすばやくホバーすると、デフォルトの状態に戻りません

Question

この質問を参考に

各項目にマウスを入力するとオーバーレイが消え、マウスを離れるとオーバーレイが表示されます。

より多くのアイテムがあり、それらをランダムにすばやくホバリングすると、以前の状態に戻りません。かなり面倒です:/

何故ですか？

 $('.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

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

これを試してみてください:- http://jsfiddle.net/adiioo7/w3Gha/1/

$('.item iframe')の代わりに使用し$('.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');
});