首页 文章

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

提问于
浏览 次
2

这个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);
javascript html css mouseevent css-position

2 回答

  • 1

    你的问题在这里：

    z-index: -10;

    这会将元素置于背景之后，这意味着虽然您可以看到它，但鼠标无法“看到”它，因为它位于（透明）背景后面，因此它不会接收鼠标悬停事件 .

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

    回复于
  • 2

    它没有为父元素设置负z-index（你为什么这样做？） . 只需将其从那里删除或将其更改为某个正值，例如1 .

    当您为元素设置负z-index时，它会创建所有子元素的负堆叠上下文，因此z-index width 40,50,60在其父元素内部有意义，但主z-index将为负数（在body元素下） ） .

    所以主要的问题是负z-index，你可以用'负z-index hover'关键词剪切它并搜索一些信息来清除这种情况

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

相关问题