jQuery的淡入困擾

我有這樣的代碼jQuery的淡入困擾

<div class="img-thumbnail pull-left"> 
    <img id="female" src="public/img/femaleMini.jpg"> 
    <div id="imgOverflow" class="text-center"><span class="glyphicon glyphicon-zoom-in"></span> Click</div> 
</div>

我不能得到的想法，我怎麼能正常顯示和隱藏DIV #imgOverflow。我需要它在鼠標懸停在圖像上時可見，並且鼠標懸停在溢出塊上時仍然可見。當鼠標離開img時隱藏它。也許這是一個愚蠢的問題，但我無法自己想出來。

來源

2014-06-13 Keiron

您可以使用簡單的jQuery鼠標懸停，鼠標移開。實例

$(document).ready(function(){ 
    $("#female").mouseover(function(){ 
     $("#imgOverflow").css('visibility','visible'); 
    }).mouseout(function(){ 
     $("#imgOverflow").css('visibility','hidden'); 
    }); 
});

http://jsfiddle.net/H5Yy2/

來源

2014-06-13 17:26:47

您的jsfiddle不能完全工作的任擇議定書的規範 - 從圖像中移動我的鼠標到溢出時，溢出仍有隱憂。 – Stevangelista

你需要一個.hover()處理的圖像，然後.mouseout()處理程序附加到溢出。這是一種方法;注意我使用標記中的顯式ID，但如果需要重用，可以使用類和引用兄弟。

$('#female').hover(function(){ 
    $('#imgOverflow').show(); 
}, function(){ 
    setTimeout(function(){ 
     if(!$('#imgOverflow').is(':hover')) 
      $('#imgOverflow').hide(); 
    },100); 
}); 
$('#imgOverflow').mouseout(function(){ 
    $(this).hide(); 
});

其原因在鼠標移出用於圖像延遲小（一秒的1/10日）是確保溢出不會瞬間隱藏。該延遲使該功能有機會查看用戶所做的是從圖像移動到溢出。

的jsfiddle：http://jsfiddle.net/6Y98U/

來源

2014-06-13 17:30:31 Stevangelista

這裏：

$('.img-thumbnail').on({ 

    'mouseover': function() { $('#imgOverflow').fadeIn(); }, 

    'mouseleave': function() { $('#imgOverflow').hide(); } 
});

clicky例如 - >http://jsfiddle.net/yEpgx/3/

注意：這是jQuery的v1.7->

來源

2014-06-13 17:40:26 jaakkoj

你需要保持她隱藏的div，放在你的CSS上：

#imgOverflow{display:none;}

和jQuery

$('img#female').mouseover(function(){ 
    $('#imgOverflow').fadeIn('slow'); 
}).mouseout(function(){ 
    $('#imgOverflow').fadeOut('slow'); 
});

例子：JSFiddle

來源

2014-06-13 17:40:34 abfurlan

與其他人的回答一樣，您的jsFiddle不能完全符合OP的規範 - 將鼠標從圖像移至溢出時，溢出仍然隱藏。你使用'.fadeOut（）'實際上可以讓你更容易看到。 – Stevangelista

jQuery的淡入困擾

回答

相關問題