javascript - 在元素上未检测到悬停

Question

图片:

我想要的:

即使鼠标光标移到上图中的蓝色菱形区域上，我也希望悬停被注册。

问题:

每当我将鼠标悬停在那个蓝色菱形区域上时，它在用户看来是 .path_part 中的一个区域，悬停规则 .folder_path .path_part:hover 是未应用于 .part_part。

我尝试了什么:

将.path_part的z-index设置为10000，将.right_arrow的z-index设置为-1。仍然没有运气。

JSFiddle link

Answer 1

工作 fiddle.

首先，z-index 可以有最大值 9999。

需要注意的是只有左边部分 .right-arrow 与 .path-part 重叠，因为悬停处理程序位于 上。路径部分 只有左边的部分会触发悬停处理程序。

此外，要使 z-index 起作用，.path-part 和 .right-arrow 都需要定位，即position 属性设置为 relative、absolute 或 fixed。

将您的 CSS 更改为:

.folder_path .right_arrow {
    position: relative;
    z-index: 1;
    display: inline-block;
    vertical-align: middle;
    height: 35px;
    width: 35px;
    content: "";
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    border: 1px solid rgba(0, 0, 0, 0.2);
    -webkit-mask-image: -webkit-gradient(linear, left top, right     bottom, from(transparent), color-stop(0.5, transparent), color-stop(0.5, #000000), to(#000000));
    margin-left: -25px;    
}

.folder_path .path_part {
    position: relative;
    display: inline-block;
    height: 50px;
    line-height: 50px;
    vertical-align: middle;
    min-width: 40px;
    font-size: 20px;
    padding: 0 10px;
    z-index: 2;
}