jquery - 连续悬停在多个元素上

Question

我有两个相邻元素 $("#video")和 $("#progress") .

我想要第三个元素$("#time")使用 fadeIn 显示当鼠标进入这些元素之一，并使用 fadeOut 再次隐藏时当鼠标离开元素时。我可以让它工作，但有一个小问题。

每当鼠标进入其中一个元素，从另一个元素出来时，$("#time")元素首先被隐藏，然后再次显示，而我希望它始终显示。

This jsfiddle更清楚地展示了这个问题。

如何解决这个问题？

请注意，尽管这些元素在网页中彼此靠近，但实际上在代码中是完全分开的，因此不可能将它们全部放在一个大的 div 中并将鼠标悬停在该 div 上。

Answer 1

你可以用另一个 div 包裹这两个元素

<div id='wrapper'>
  <div id="video" style="background: green; height: 100px;" class="hover">VIDEO</div>
  <div id="progress" style="background:red" class="hover">bar</div>
</div>
<div id="time" style="display: none">01:35</div>

然后将 hover 绑定(bind)到包装 div

$("#wrapper").hover(function () {
  $("#time").fadeIn(300);
}, function () {
  $("#time").fadeOut(300);
});

FIDDLE