连续悬停在多个元素上

我有两个相邻元素$("#video")和$("#progress")。连续悬停在多个元素上

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

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

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

这怎么解决？

请注意，元素尽管在网页中彼此接近，但实际上在代码中相当分离，所以不可能将它们全部放在一个大的div中，并将悬停放在该div上。

来源

2013-01-07 romeovs

你有没有想过将两个元素添加到包含div并设置悬停在该div上？ – martineno

对于淡出代码和变量，您可以使用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/

来源

2013-01-07 18:01:43 Hosein

你可以用这两种元素与另一种格

<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

来源

2013-01-07 17:39:32

我喜欢你的解决方案，但如果divs有不同的宽度，会导致不希望的结果。见[fiddle]（http://jsfiddle.net/bplumb/mEppj/1/） –

尝试放置一个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>

来源

2013-01-07 17:39:57 brenjt

我知道我迟到了就这一个，但我想说的话，我会检查是否元素正在上空盘旋，如果他们不执行淡出。请参阅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); 
});

来源

2013-01-07 18:27:32

+1好的答案..好奇为什么你有setTimeout虽然 –

@wirey如果你不'setTimeout（）'然后'mouseleave事件'在'hover'状态改变之前被触发。 –

连续悬停在多个元素上

回答

相关问题