Mouseenter and Mouseleave function in jquery
<p>i have div box. i want when user hover it or mouseenter then next div should display and when user mouseout the visible div should fadeout. my function not working correctly. </p>

<pre><code>&lt;head&gt;    
&lt;script type="text/javascript" src="jquery-1.7.2.js"&gt;&lt;/script&gt;    
&lt;script type="text/javascript"&gt;  

$(function (){      

    $('.box').bind({            
        mouseenter: function (){                
            $(this).next().fadeIn('fast')               
        },          
        mouseout: function (){
            $(this).next().fadeOut('fast')                  
        }


        })      
    })    
&lt;/script&gt;    

&lt;style&gt;

body { margin:0}
.box { height:300px; width:300px; background:#F00}

.boxcaption { width:300px; height:300px; background:#00F; position:absolute; left:0; top:0; display:none}
&lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;

&lt;div class="wrap"&gt;

&lt;div class="box"&gt;&lt;/div&gt;
&lt;div class="boxcaption"&gt;&lt;/div&gt;

&lt;/div&gt;
&lt;/body&gt;
</code></pre>
