如何使用jquery在鼠標上顯示隱藏div？

Question

我想在<div class="thumb">的懸停上顯示隱藏的div，並且我有多個div頁面上每個拇指div有不同的內容圖像。 width是解決所有div但height大格<div class="large" style="display:none">可以根據裏面的內容股利後的圖像進行擴展。

的h2文本將永遠在兩個div相同。

如果鼠標在裏面< div class="large"></div>那麼div應該留在屏幕上。

<!----------------- Small Boxes -----------------> 
<div class="thumb"> 
    <h2>Box1</h2> 
    <img src="test_files/images/thumbnail/thumb1.png" /> 
</div> 

<!----------------- Large Boxes on hover -----------------> 
<div class="large" style="display:none"> 
    <h2>Box1</h2> 
    <h3>Heading 3 (this text will come over the image)</h3> 
    <img src="test_files/images/large/large1.png" /> 
    <p> 
     Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
    </p> 
</div> 

我只是給出一個div的例子，但在實際我將有實際的頁面上有多個箱子。

圖像來理解這個問題

在實際的網頁我將有多個boxe這樣

Answer 1

 
$('.thumb').mouseover(function() { 
    $(this).next().css('display', 'block'); 
}); 

$('.thumb').each(function(i, item) { 
    $(this).next().mouseout(function() { 
     $(this).css('display', 'none'); 
    }); 
});