Как показать скрытый div при наведении курсора на jquery?

Question

Я хочу показать скрытое div при наведении <div class="thumb">, и у меня есть несколько div на странице, каждый большой палец div имеет различное содержание изображений. width исправлено для всех div, но height большого div <div class="large" style="display:none"> может быть расширен на контент после изображения внутри div.

Текст h2 всегда будет одинаковым в обоих div.

Если мышь находится внутри <<code>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');
    });
});