How to show hidden div on mouse over using jquery?

I want to show hidden div on hover of <div class="thumb"> and i have multiple div on page each thumb div has different content images. width is fix for all div but height of large div <div class="large" style="display:none"> can be extended upon content开发者_如何学Python after the image inside div.

Text of h2 will be always the same in both div.

If mouse is inside <div class="large"></div> then the div should stay on screen.

<!-----------------  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>

I just given a example of one div but in actual I will have multiple boxes on actual page.

Image to understand the question

In actual page I will have multiple boxe like this

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

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