连续悬停在多个元素上答案

【问题标题】：continious hover on multiple elements连续悬停在多个元素上
【发布时间】：2013-01-07 17:36:43
【问题描述】：

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

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

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

This jsfiddle 更清楚地说明了这个问题。

如何解决这个问题？

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

【问题讨论】：

您是否考虑过将这两个元素都添加到包含的 div 中并在该 div 上设置悬停？

标签： jquery css jquery-hover

【解决方案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

【讨论】：

我喜欢您的解决方案，但如果 divs 的宽度不同，则会导致不良结果。见fiddle

【解决方案2】：

我知道我迟到了，但我想说我会检查元素是否被悬停，如果不是，则执行淡出。见fiddle。如果用户快速输入并存在div，我还将添加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);
});

【讨论】：

+1 好答案.. 很好奇为什么你有 setTimeout
@wirey 如果你不setTimeout()，那么mouseleave event 在hover 状态改变之前被触发。

【解决方案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>

【讨论】：

【解决方案4】：

您可以将 setTimeout 方法用于您的 Fade Out 代码，并通过一个变量找出您是否应该隐藏它。

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/

【讨论】：