多元素持续悬停

Question

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

当鼠标进入这些元素中的任意一个时，我希望用fadeIn显示第三个元素$("#time")，当鼠标离开该元素时再使用fadeOut隐藏它。我可以让它工作，但是存在一个小问题。

无论何时鼠标进入其中一个元素并离开另一个元素时，$("#time")元素首先被隐藏，然后再次显示，而我希望它始终显示。

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

如何解决这个问题？

请注意，尽管这些元素在网页上非常接近，但它们在代码中实际上是分开的，因此无法将它们全部放在一个大div中，并将hover应用于该div。

- romeovs

---

你有没有考虑将这两个元素都添加到一个包含的 div 中，并设置鼠标悬停在该 div 上？ - martineno

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事件绑定到包装div上。

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

示例代码

这是一个链接到示例代码的网页。

- wirey00

---

我喜欢你的解决方案，但是如果“ divs”具有不同的宽度，它将会导致不良结果。请参见fiddle。 - Blake Plumb

Answer 2

我知道我现在来晚了，但我想说我会检查这些元素是否被悬停，并且如果没有被悬停，则执行淡出效果。请参见示例代码。此外，我还会添加stop()方法，以避免用户快速进入和退出

时触发多个动画效果。

$('.hover').hover(function(){
  $('#time').stop(true,true).fadeIn(300);
},function(){
  setTimeout(function(){
    if($('.hover:hover').length == 0){
        $('#time').stop(true,true).fadeOut(300);
    }
  },0);
});

- Blake Plumb

---

+1个好答案.. 不过我很好奇你为什么要用setTimeout。 - wirey00

如果您不使用setTimeout()，则mouseleave事件会在hover状态更改之前触发。 - Blake Plumb

Answer 3

尝试在整个区块周围放置一个div，并将hover类添加到该div。

<div class="hover">
    <div id="video" style="background: green; height: 100px;"> VIDEO </div>
    <div id="progress" style="background:red"> bar </div>

    <div id="time" style="display: none"> 01:35 </div>
</div>

- brenjt

Answer 4

你可以使用setTimeout方法来实现淡出代码，并通过一个变量判断是否应该隐藏它。

var ShouldBeShown = false;    
$(".hover").hover(fIN, function(){
  ShouldBeShown = false;
  setTimeout(fOUT, 50);
});
function fIN() {
  ShouldBeShown = true;
  $("#time").fadeIn(300);
}
function fOUT() {
  if(!ShouldBeShown)
    $("#time").fadeOut(300);
}

http://jsfiddle.net/EyFdn/1/

- Hosein