title: Positioning disables hover selector and mouseover events
body: <p>This jsfiddle..</p>
  
  <p><a href="https://jsfiddle.net/9e1wd245/12/" rel="nofollow">https://jsfiddle.net/9e1wd245/12/</a></p>
  
  <p>..demonstrates a browser behavior I'd like to understand better than I do.</p>
  
  <p>If you remove the positioning from the crumbtray and the crumb, the hover- selected CSS is applied when the crumb is hovered and mouseover events are triggered when the mouse enters the crumb. </p>
  
  <p>With the positioning in place, neither of those things happen; but if you hover over the <em>top border</em>, the hover CSS is applied and the mouseover event is triggered. </p>
  
  <p>(In this situation, the approach used uses positioning to enable z-indexing so that the curved right border will appear over the left side of the adjacent elements.)</p>
  
  <p>Note that you can take the negative right margin off the crumb, and the problem persists, so it isn't being caused by the negative margin. </p>
  
  <p>I realize I could use an svg for a crumb, or maybe use a couple of separator elements over a shared background rather than using positioning and z-indexing, but why doesn't this work? Is there something in the spec that says hover and mouseover events aren't expected to work for positioned elements? Is there something else entirely that I'm overlooking?</p>
  
  <p>html:</p>
  
  <pre><code>&lt;div class="crumbtray"&gt;
      &lt;span class="crumb"&gt;USA&lt;/span&gt;
      &lt;span class="crumb"&gt;California&lt;/span&gt;
      &lt;span class="crumb"&gt;Sacremento&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.crumbtray {
      position: relative;
      top: 0px;
      left: 0px;
  
      display: inline;
      z-index: -10;
      font-family: ariel, sansserif
      font-size: 12px;
  }
  .crumb { 
      position: relative;
      top: 0px;
      left: 0px;
  
      display: inline;
      border: solid 1px gray;
      border-left: none;
      border-radius: 0px 10px 10px 0px;    
  
      padding: 0px 8px 0 12px;
      margin-right: -10px;
      cursor: pointer;
  
      background: #c3f4c6;
      background: -moz-linear-gradient(top,  #c3f4c6 0%, #96f788 8%, #98e0a4 92%, #419330 96%, #188700 100%);
      background: -webkit-linear-gradient(top,  #c3f4c6 0%,#96f788 8%,#98e0a4 92%,#419330 96%,#188700 100%);
      background: linear-gradient(to bottom,  #c3f4c6 0%,#96f788 8%,#98e0a4 92%,#419330 96%,#188700 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c3f4c6', endColorstr='#188700',GradientType=0 );
  }
  .crumb:hover {
      background: none;
      background-color: yellow;
  }
  
  .crumb:first-child {
      border-left: solid 1px gray;
      z-index: 60;
      padding-left: 2px;
  }
  .crumb:nth-child(2) {
      z-index: 50;
  }
  .crumb:nth-child(3){
      z-index: 40;
  }
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>var ViewModel = {
      init: function(){
          console.log("ViewModel.init called");
          $('.crumbtray').on('mouseover','span',function(){
              console.log('mouseover crumb: ', this);
          });
      }
  };
  
  $(ViewModel.init);
  </code></pre>