title: in jQuery how to give the priority of being detected by "mouseover" event to the child element
body: <p>my question is how to give the priority of being detected by "mouseover" event to the child element rather than its parent? </p>
  
  <p><strong>this is the jquery code:</strong></p>
  
  <pre><code>&lt;script&gt;
  $(function() {
      $("li").mouseover(function(event){
          $('#log').html($(this).text());
      });
  }); 
  &lt;/script&gt;   
  </code></pre>
  
  <p><strong>and this is the html code</strong></p>
  
  <pre><code>  &lt;ul&gt;
       &lt;li&gt;item 1&lt;/li&gt;
       &lt;li&gt;item 2&lt;/li&gt;
       &lt;li&gt;item 3
          &lt;ul&gt;
             &lt;li&gt;item 3.1&lt;/li&gt;
             &lt;li&gt;item 3.2&lt;/li&gt;
             &lt;li&gt;item 3.3&lt;/li&gt;
          &lt;/ul&gt;
       &lt;/li&gt;
       &lt;li&gt;item 4&lt;/li&gt;
    &lt;/ul&gt;
  
    &lt;div id="log"&gt;log&lt;/div&gt;
  </code></pre>
  
  <p>how to output the current element when doing mouseover? </p>
  
  <p>the problem is when you mouseover "item 3.1"  the jquery will not detect "item 3.1" and instead jquery will assume that you mouseover "item 3" ?</p>
  
  <p>Thanks</p>