Comment montrer div div sur la souris sur l'utilisation de jquery?

Question

Je veux montrer caché div sur le vol stationnaire de <div class="thumb"> et j'ai plusieurs div à la page chaque pouce div a différentes images de contenu. width est correctif pour tous div mais height de div grand <div class="large" style="display:none"> peut être étendu sur le contenu après l'image à l'intérieur div.

Le texte de h2 sera toujours le même dans les deux div.

Si la souris est à l'intérieur < div class="large"></div> alors le div doit rester à l'écran.

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

Je viens de donner un exemple d'une div mais réelle je vais avoir plusieurs boîtes à la page réelle.

image pour comprendre la question

Dans la page réelle je vais avoir plusieurs comme cette boxe

Answer 1

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

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