div hides onmouseover event on a link
<p>I have a div and a simple jQuery code that calls the div on an 'onlclick' event and properly hides on 'onmouseout' event. The problem is when I put a text or a link inside this div and move a cursor over the text / link in this div - it triggers  out() function effect and dissappears - even if the cursor is still inside the div. Why is that so ? Thanks for comments.</p>

<pre><code>&lt;script src="js/jquery.js"&gt;&lt;/script&gt;
&lt;style type="text/css"&gt;
#sample {
position:relative;
width:500px;
height:200px;
background-image:url(images/img.png);
background-repeat:repeat-x;
}

&lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;a href="javascript:show();" &gt;link&lt;/a&gt;
&lt;div id="sample" onmouseout="out()"&gt;&lt;a href=""&gt;THIS IS TEXT&lt;/a&gt;&lt;/div&gt;


&lt;script type="text/javascript"&gt;
$(document).ready(function() { 
$("#sample").hide();
});

function show() {
$("#sample").fadeIn('slow');

}

function out() { 

$("#sample").fadeOut('slow');

}
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
