jQuery triggers out event even though it should be still in
<p>I am facing a rather awkward problem. I register two event handlers, one for <code>mouseenter</code> and one for <code>mouseout</code> for the <code>li</code> elements on the page. It has multiple <code>div</code> areas inside it. When I leave the <code>li</code> element it calls the <code>out</code> handler, which is ok. What is not ok is that the <code>out</code> handler is also triggered when I leave a <code>div</code> inside that <code>li</code>.  </p>

<p>Below is an image that illustrates it. The blue area is the <code>li</code> element which I register an <code>enter</code> and <code>out</code> event for.<br>
<img src="http://i.stack.imgur.com/POwAc.jpg" alt="enter image description here"> </p>

<p>I tried to register handlers on the inner <code>divs</code> that would stop the propagation but it only results in the triggering of the <code>out</code> handler when I enter those inner divs.  </p>

<p>Any idea what is going wrong here?</p>
