处理剪辑路径对象时的 Z-index 问题答案

【问题标题】：Z-index problem when dealing with clip-path objects处理剪辑路径对象时的 Z-index 问题
【发布时间】：2021-08-29 03:35:49
【问题描述】：

我遇到了一些问题我试图让两个剪辑路径多边形在鼠标悬停时相互重叠，我正在使用 z-index 并尝试根据覆盖来更改它们，但我似乎无法让它工作。

.banner {
    bottom 0;
    top: 0;
    left:0;
    right: 0;
    width: 100%;
    height: 700px;
    position: relative;
}

.overlayleft {
    position absolute;
    z-index: 1;
    bottom 0;
    top: 0;
    left:0;
    right: 0;
    width: 50%;
    height: 100%;
    overflow:hidden;
    clip-path: polygon(0 0, 75% 0, 100% 100%, 0% 100%);
    background: rgba(0,0,0,1);
    transition: .5s ease;
}

.overlayright {
    position: absolute;
        z-index: 3;
    bottom: 0;
    top 0;
    left: 50%;
    right: 0;
    width: 50%;
    height: 100%;
    overflow:hidden;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 25% 100%);
    background: rgba(0,0,0,0.6);
    transition: .5s ease;
}

.overlayright:hover{
  width: 100%;
  left: 0;
}
.overlayleft:hover{
  width: 100%;
}




</style>
</head>

<body>
<div class="banner">
<div class="overlayright"></div>
<div class="overlayleft"></div>
    
</div>
</body>

【问题讨论】：

标签： html css z-index clip-path

【解决方案1】：

您需要在 :hover 规则集中设置 z-index 值，以便在您使用鼠标悬停时做出响应。无论您在 non-:hover 规则集中拥有什么 z-index 值都是默认值，然后当将鼠标悬停在上面时，这些值会覆盖前面适用规则集中的任何值。

这应该会有所帮助，假设您想将叠加层在堆栈中向前移动。根据需要调整 z-index 的值以使其向后或向前：

.overlayright:hover{
  z-index: 4;
  width: 100%;
  left: 0;
}
.overlayleft:hover{
  z-index: 4;
  width: 100%;
}

【讨论】：

我试过了，但似乎overlayleft仍然在顶部
您是否尝试从非：悬停规则集中删除 z-index？
是的，没有变化。