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

Question

这个 jsfiddle..

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

..展示了我比我更了解的浏览器行为。

如果您从 crumbtray 和 crumb 中删除定位，悬停选择 CSS 将在悬停 crumb 时应用，并且当鼠标进入 crumb 时会触发 mouseover 事件。

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

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

请注意，您可以从面包屑中去除负右边距，问题仍然存在，所以它不是由负边距引起的。

我知道我可以使用 svg 作为碎屑，或者在共享背景上使用几个分隔符元素而不是使用定位和 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);

Answer 1

您的问题在这里：

z-index: -10;

这会将元素放在背景后面，这意味着虽然您可以看到它，但鼠标无法 "see" 因为它在（透明）背景后面，所以它不会收到鼠标悬停事件。

现在，它应该仍然有效，因为 .crumbs 在背景之上有一个正的 z-index。很可能只是一个错误，我不相信这种行为在任何地方都有记录。

Answer 2

它不起作用，因为您已将负 z-index 设置为父元素（您为什么要这样做？）。只需将其从那里删除或将其更改为某个正值，例如 1。

当您为元素设置负 z-index 时，它会创建所有子元素的负堆叠上下文，因此 z-index 宽度 40、50、60 在其父元素中才有意义，但主要 z-index 将是否定（在正文元素下）。

所以主要的问题是z-index为负，你可以把它切下来，用'negative z-index hover'关键字搜索一些资料来解决这个问题

.crumbtray {
    position: relative;
    top: 0px;
    left: 0px;
    display: inline;
    z-index: -10;
    font-family: ariel, sansserif
    font-size: 12px;
}

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

Positioning disables hover selector and mouseover events

html

javascript

css

css-position

mouseevent