title: MouseOver doesn't bubble on overlapping divs?
body: <p>Using jQuery 2.1, Meyer's 2.0 CSS <a href="http://meyerweb.com/eric/tools/css/reset/" rel="nofollow">reset script</a>, targeting IE9+ and modern browsers.</p>
  
  <p>I've made two overlapping divs. I'm listening to <code>mouseover</code> and <code>mouseout</code> events on both of them. Fiddle: <a href="http://jsfiddle.net/vbkjL/1/" rel="nofollow">http://jsfiddle.net/vbkjL/1/</a></p>
  
  <p>Expected behaviour: mouseover events fire on both divs.</p>
  
  <p>Actual behaviour: mouseover event fires only on the top div.</p>
  
  <p>How can I make the mouseover event bubble to the bottom div?</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div id="top"&gt;&lt;/div&gt;
      &lt;div id="below"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>jQuery</p>
  
  <pre><code> $("#top")
       .mouseover(function () {
       console.log("top");
   })
       .mouseout(function () {
       console.log("top out");
   });
  
   $("#below")
       .mouseover(function () {
       console.log("bottom");
   })
       .mouseout(function () {
       console.log("bottom out");
   });
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#top {
      position: absolute;
      top: 0;
      left: 0;
      width: 100px;
      height: 100px;
      border: 1px red solid;
  }
  #below {
      position: absolute;
      top: 0;
      left: 0;
      width: 32px;
      height: 32px;
      border: 1px blue solid;
  }
  </code></pre>