如何使用jquery在鼠标上显示隐藏的div？

Question

我希望在div悬停时显示隐藏的<div class="thumb">，并且我在页面上有多个div，每个拇指div都有不同的内容图片。 width已针对所有div进行了修复，但{div> height的{​​{1}}可以在div中的图片后面的内容上进行扩展。

<div class="large" style="display:none">中h2的文字始终相同。

如果鼠标位于＆lt; 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> 的示例，但实际上我会在实际页面上有多个框。

图片了解问题

在实际页面中，我会有多个像这样的盒子

Answer 1

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

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