Question

这个jsfiddle ..

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

..演示了一种我想比我更了解的浏览器行为。

如果从crumbtray和crumb中移除定位，则当碎屑悬停时应用悬停选择的CSS，并且当鼠标进入碎屑时触发鼠标悬停事件。

随着定位的到位，这些都不会发生;但如果将鼠标悬停在上边框上，则会应用悬停CSS并触发鼠标悬停事件。

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

请注意，您可以从面包屑中取消负右边距，问题仍然存在，因此不会由负边距引起。

我意识到我可以使用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;

这会将元素置于背景之下，这意味着虽然您可以看到它，但鼠标无法看到＆＃34;因为它在（透明）背景后面，所以它不接收鼠标悬停事件。

现在，它仍然可以正常工作，因为.crumb在背景之上具有正z-index。很可能只有一个错误，我不相信这种行为会记录在任何地方。

Answer 2

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

当你为一个负的z-index设置元素时，它会创建所有子元素的负堆叠上下文，所以z-index width 40,50,60在它的父元素中是有意义的，但是主z-index将是负面的（在身体元素下）。

所以主要的问题是负z-index，你可以用负z-index hover＆＃39;来剪切它并搜索一些信息。用于清除情况的关键字

class ChangeRequestToFromColumnTypes < ActiveRecord::Migration
  def change
    change_column :requests, :from, :datetime
    change_column :requests, :to, :datetime
  end
end

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

2 个答案: