trigger alert on div's mouse out
<p>Im testing out something here,so please excuse the css rules.I have got a <strong>ul</strong> list in a div,and im trying to trigger a alert on the mouseout of the div but the alert triggers each time i mouseout the <strong>li</strong> items in the <strong>ul</strong>. Could some please tell me the reason behind it? I guess its something to so with bubbling but im not sure.</p>

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;title&gt;Untitled Document&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt;

&lt;style&gt;
#box{
cursor:pointer;width:300px;height:500px;background-color:#F1E0BB;
}

ul#myList{
list-style:none;padding-top:20px;
}

ul#myList li{
font-family:Arial;font-size:20px;font-weight:bold;height:40px;cursor:pointer;border:solid 1px #000;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div id="box"&gt;
    &lt;ul id="myList"&gt;
        &lt;li&gt;Item 11&lt;/li&gt;
        &lt;li&gt;Item 12&lt;/li&gt;
        &lt;li&gt;Item 13&lt;/li&gt;
        &lt;li&gt;Item 14&lt;/li&gt;
        &lt;li&gt;Item 15&lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;


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

<p>Jquery script i used</p>

<pre><code>$('#box').mouseout(function(){

alert("ccc");

})
</code></pre>
