jQuery mouseout 超时第 2 部分

Question

这是this one 之后的另一个问题。

$('.overlay').bind("mouseenter",function(){
  $(this).fadeTo('slow', 0);
}).bind("mouseleave",function(){
  var $this = $(this);                               
  setTimeout(function() { 
    $this.fadeTo('slow', 1);
  }, 2000);
})

在我的 .overlay div 下，我有一些我想要使其可点击的内容。因此，在这种情况下， .overlay 的不透明度变为 0，但仍覆盖了下面的内容。

如果我在这里使用fadeOut() 和fadeIn()，则.overlay 将完全消失，并且脚本认为我已将鼠标移出，即使我仍将鼠标悬停在.overlay 上。

Answer 1

即使不透明度为零，叠加层仍在吞噬鼠标事件。实际上，您的解决方案取决于此，因为您无法触发覆盖层上的 mouseenter 和 mouseleave 事件，并且仍然具有可点击的元素。

最好的办法可能是在容器 div 中创建叠加层和兄弟元素下方的元素。容器应该绑定了mouseenter 和mouseleave 动作，当覆盖层完全淡出时，它也应该被隐藏。这将允许您点击它“下方”的元素。

关键是为了能够点击覆盖下方的元素，它必须被隐藏或不覆盖下方的元素，即使它是完全透明的。

顺便说一下，我认为这种行为是特定于浏览器的。例如，在 IE 中，您可能可以在透明覆盖层下方单击，但在 FF 中则不能。