当项目快速悬停时，它们不会返回其默认状态答案

【问题标题】：When items are hovered fast they're not returning to its default state当项目快速悬停时，它们不会返回其默认状态
【发布时间】：2013-07-31 08:12:16
【问题描述】：

参考this question

当 mouseenter 在每个项目上时，其覆盖消失，当 mouseleave - 覆盖显示。

当我有更多项目，并且快速随机悬停在它们上时，它们不会返回到之前的状态。这很烦人：/

为什么会这样？

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

【问题讨论】：

创建一个小提琴或将您的代码发送给我们，因为用这么少的信息很难帮助您。
似乎计时器可以解决您的问题。例如当输入一个项目时，从大约 500 毫秒开始 tiemout 并在其完成后执行悬停功能。这种方式将排除快速悬停。
没有代码很难，问题也可能是离开处理程序不会正确触发
更新了 jsfiddle 的链接

标签： jquery hover mouseenter mouseleave

【解决方案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');
      }
  );

【讨论】：

你是老板 :) 谢谢你 :)

【解决方案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');
});

【讨论】：

但是如果你在 div/iframe 的顶部添加一个图层，你将无法点击下面的内容。
这就是为什么我尝试使用 z-index: -1 on the overlay