title: Duplicate onmouseover / onmouseout calls for the li tag
body: <p>I have the following code. (You can copy it into a file to debug in Firefox, and see the outputs in the Console Tab in Firebug).</p>
  
  <p>When I add <code>onmouseover</code> envent to the <code>li</code> tags, and move the mouse into the <code>li</code> area, the console info comes out.</p>
  
  <p>The problem is when I moving the mouse from the image (Google logo) to the text under it, multiple info are print out. Why does the <code>onmouseout</code> event triggered, since I don't leave the <code>li</code> area?</p>
  
  <p>What should I do to prevent triggering the <code>onmouseout</code> events in this situation.</p>
  
  <p>Thank you!! </p>
  
  <pre><code>&lt;html&gt;
  &lt;body&gt;
  
  &lt;div&gt;
      &lt;ul&gt;
          &lt;li onmouseover="console.info('over')" onmouseout="console.info('out')" style="float:left;display:block;width:30%;height:200px;border: 2px solid red;"&gt;
              &lt;img src="https://www.google.com/intl/en_com/images/srpr/logo3w.png"&gt;
              &lt;br/&gt;
              &lt;br/&gt;
              &lt;a href="#"&gt;Google&lt;/a&gt;
          &lt;/li&gt;
          &lt;li style="float:left;display:block;width:30%;"&gt;
              &lt;img src="https://www.google.com/intl/en_com/images/srpr/logo3w.png"&gt;
              &lt;br/&gt;
              &lt;br/&gt;
              &lt;a href="#"&gt;Google&lt;/a&gt;
          &lt;/li&gt;
          &lt;li style="float:left;display:block;width:30%;"&gt;
              &lt;img src="https://www.google.com/intl/en_com/images/srpr/logo3w.png"&gt;
              &lt;br/&gt;
              &lt;br/&gt;
              &lt;a href="#"&gt;Google&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>