定位将禁用悬停选择器和鼠标悬停事件

这个jsfidd。。

https://jsfiddle.net/9e1wd245/12/

演示了一种浏览器行为，我想比现在更好地理解它。

如果从crumbtray和crumb中移除定位，则悬停选中的CSS将在crumb悬停时应用，鼠标进入crumb时将触发鼠标悬停事件。

定位到位后，这两件事都不会发生；但是，如果您将鼠标悬停在顶部边界上，则会应用悬停CSS并触发mouseover事件。

（在这种情况下，使用的方法使用定位来实现z索引，这样弯曲的右边界将出现在相邻元素的左侧。）

请注意，你可以去掉碎屑上的负右边距，问题仍然存在，所以它不是由负边距引起的。

我意识到我可以使用svg作为crumb，或者在共享背景上使用几个分隔符元素，而不是使用定位和z索引，但为什么这不起作用？规范中是否有说明悬停和鼠标悬停事件不适用于已定位的元素？还有什么我完全忽略了的吗？

html:

<div class="crumbtray">
    <span class="crumb">USA</span>
    <span class="crumb">California</span>
    <span class="crumb">Sacremento</span>
</div>

css：

.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;
}

JavaScript:

var ViewModel = {
    init: function(){
        console.log("ViewModel.init called");
        $('.crumbtray').on('mouseover','span',function(){
            console.log('mouseover crumb: ', this);
        });
    }
};
$(ViewModel.init);