Nested elements hover handle
<p>All, I am stuck with a problem which deal with the nested element hover handler. It seems When the mouse enter the <code>child</code> div , the ancestors are also in <code>hover</code> state, Is there any ways trigger the <code>hoverout</code> event of ancestors ,when mouse enter the <code>child</code> element?</p>

<p>Below is what I trying to make it so far. please review it .</p>

<pre><code>&lt;style&gt;
div
{
    border:1px solid red;
    margin:10px;
    padding:10px;
}
&lt;/style&gt;


  &lt;script&gt;
      $(function() {
           $('div').each(function(){
             var current = this;
             $(this).hover(function(event){
                event.stopPropagation();// doesn't work.
                console.log('Capture for hover in ' + current.tagName + '#'+ current.id +
                    ' target is ' + event.target.id); },
               function(event){
                  event.stopPropagation();
                  console.log('Capture for hover out' + current.tagName + '#'+ current.id +
                    ' target is ' + event.target.id); });

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

 &lt;body id="greatgrandpa"&gt;                        
        &lt;div id="grandpa"&gt;
               &lt;div id="parent"&gt;
                  &lt;div id="child"/&gt;
               &lt;/div&gt;
        &lt;/div&gt;
 &lt;/body&gt;
</code></pre>
