連續懸停在多個元素上

我有兩個相鄰元素$("#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'狀態改變之前被觸發。 –

連續懸停在多個元素上

回答

相關問題