title: Stop mouseout events when mouse move in specified element
body: <p>All , I knew <code>mouseover</code> and <code>mouseout</code> events, these events are trigger when the mouse moves in and out of elements AND it's descendants. 
  Let me take a example ,Say you have a dom structure like below:</p>
  
  <pre><code>&lt;div id="top"&gt;
     &lt;div class="container"&gt;
        &lt;!--&lt;div class="head"&gt;
        &lt;/div&gt;--&gt;
        &lt;div class="content"&gt;
           &lt;!--maybe there are many nested `div.contiainer` as children directly or not directly.--&gt;
        &lt;div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Supposed the mouse move in the <code>div.container</code> we append a <code>div.head</code> in there. and when mouse out we remove the <code>div.head</code> which was created when mouse in.</p>
  
  <p>so the code will looks like below .</p>
  
  <pre><code>    $("div.container").on("mouseover",function(){//append div.head})
  .on("mouseout",function(){//remove the div.head});
  </code></pre>
  
  <p>So my question is I want to whether there is possiblility to stop the event <code>mouseout</code> when mouse move in <code>div.head</code> ?</p>