javascript - 如何使用 jquery 在鼠标悬停时显示隐藏的 div？

Question

我要显示隐藏div悬停在 <div class="thumb"> 上我有多个 div在页面上每个拇指 div有不同的内容图像。 width已修复所有 div但是height大 div <div class="large" style="display:none">可以在 div 内图像之后的内容上进行扩展。

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但实际上我会在实际页面上有多个框。

看图看问题

在实际页面中我会有多个像这样的框

Answer 1

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