使用clip-path实现多边形遮罩时hover重叠的z-index失效问题

核心故障原因 #

• 存在CSS语法错误：.overlayleft的position属性、.overlayright的top属性缺失冒号，导致部分样式规则未被浏览器解析生效
• hover逻辑缺失层级修改：默认.overlayright的z-index为3，高于.overlayleft的1，即便.overlayleft触发hover展开，层级依然低于右侧元素，无法实现覆盖效果
• clip-path不需要额外调整：其百分比取值基于元素自身尺寸，元素宽度变为100%后多边形会自动适配新尺寸

修复后完整代码 #

<!DOCTYPE html>
<html>
<head>
<style>
.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: 2;
    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;
  z-index: 10;
}
.overlayleft:hover{
  width: 100%;
  z-index: 10;
}

</style>
</head>
<body>
<div class="banner">
  <div class="overlayright"></div>
  <div class="overlayleft"></div>
</div>
</body>
</html>

内容的提问来源于stack exchange，提问作者Harry Mecha