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>

然后将悬停绑定到包装div

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

FIDDLE

Answer 2

我知道我迟到了，但是我想说我会检查这些元素是否正在盘旋并执行淡出，如果不是的话。见fiddle。我还会添加stop()方法，以避免在用户快速输入并存在div时触发多个动画。

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

Answer 3

尝试在整个块周围放置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>

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/

连续悬停在多个元素上

4 个答案: