我遇到了一些问题，我试图有两个剪辑路径多边形相互重叠时，鼠标悬停，我使用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>
在hover规则集中需要z-index值，以便在鼠标悬停时使它们响应。无论你在非悬停规则集中有什么z-index值都是默认值，然后当悬停在上面时，这些值将覆盖之前适用规则集中的任何值。
这应该有帮助，假设你想把叠加在堆栈中。根据需要调整z-index的值，使其向后或向前:
.overlayright:hover{
z-index: 4;
width: 100%;
left: 0;
}
.overlayleft:hover{
z-index: 4;
width: 100%;
}