title: Handle mouseenter/mouseleave on a div and nested elements with jQuery
body: <p>I want to display a toolbar if the mouse is over a div or any of the <code>div</code>'s nested elements. But the following solution with jQuery 1.7 only works if the mouse is over the <code>div</code> directly what is only possible if I add a <code>padding</code> to the <code>item</code> css class.</p>
  
  <p>
    
    </p>
  
  <pre><code>&lt;head&gt;
    &lt;script type="text/javascript" src="jquery-1.7.min.js"&gt;&lt;/script&gt;
    &lt;style type="text/css"&gt;
      .toolbar { display: none; }
      .item { padding: 1px; } /* doesn't work without padding! */
    &lt;/style&gt;
    &lt;title&gt;Demo&lt;/title&gt;
  &lt;/head&gt;
  
      &lt;body&gt;
  
    &lt;div class="section"&gt;
      &lt;div class="item"&gt;
        &lt;p class="toolbar"&gt;TOOLS&lt;/p&gt;
        &lt;p&gt;content&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;
        &lt;p class="toolbar"&gt;TOOLS&lt;/p&gt;
        &lt;p&gt;content&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;script type="text/javascript"&gt;
      $(".section").on(
        "mouseenter",
        ".item",
        function(event) {
  
          $(event.target).children('.toolbar')
            .show(100);
        }
      )
  
      $(".section").on(
        "mouseleave",
        ".item",
        function(event) {
          $(event.target).children('.toolbar').hide();
        }
      )      
    &lt;/script&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>A padding of 1px wouldn't be so bad, but it leads to bigger padding at the top and bottom and this workaround doesn't work properly - especially if the mouse enters from the left or right side.  </p>
  
  <p>How can I handle <code>mouseenter</code> and <code>mouseleave</code> events without the padding trick? </p>