Javascript css剪辑路径仅在形状上悬停

正如在我的代码笔中看到的，有两个灰色缩放的形状。现在只能将两者中的一个悬停，因为原始大小是一个长方体，并且与两个图像重叠。 但是，有没有一种方法可以在悬停时识别形状？Z索引不会导致结果。。。 希望你能帮我一点忙！ 如果没有JS会很好，但这不是k.o

html:

---

干杯

对于这个简单的形状，您可以使用指针事件删除它，并旋转一个伪元素以仅在图像的一部分上重新打开它

关于指针事件

范例

/*打开/关闭指针事件的CSS开关*/ 两个{ 位置：相对位置； 溢出：隐藏；/*隐藏伪溢出*/ 指针事件：无； } 二：以前{ 指针事件：自动； 内容：； 位置：绝对位置； 最高：100%； 左：0； z指数：2； 宽度：150%； 身高：100%； /*根据比率图像设置变换*/ 变换原点：左上角； 变换：旋转-30度； /*如果您想查看它的位置，请添加边框或背景*/ } /*结束CSS开关*/ img{ 宽度：700px； 高度：400px； 对象匹配：覆盖； 显示：块；/*避免下方的间隙*/ } 一个img{ -webkit剪辑路径：polygon0，0%100%，100%0； 剪辑路径：polygon0，0%100%，100%0； } 两个img{ -webkit剪辑路径：polygon100%100%，0%100%，100%0； 剪辑路径：polygon100%100%，0%100%，100%0； } 一个{ 位置：绝对位置； z指数：0； 排名：0； 左：0； } 两个{ 位置：绝对位置； 顶部：0px； 左：0； z指数：0； } 一 两个{ 过滤器：sepia100%；/*演示用途*/ } 一:悬停,， 二：悬停{ 过滤器：灰度0%； }

---

下面是另一个想法，使用更少的代码和不使用剪辑路径来创建相同的文件

.集装箱{ 宽度：300px； 高度：200px； 位置：相对位置； 溢出：隐藏； } .集装箱img{ 宽度：100%； 身高：100%； 对象匹配：覆盖； 显示：块； } .货柜组{ 位置：绝对位置； 排名：0； 左：0； 宽度：100%； 身高：100%； 变换：skewX-56.3deg；/*tanangle=Width/height->angle=arctanwidth/height*/ 变换原点：顶部； 溢出：隐藏； } .货柜组{ 变换：skew56.3deg； 变换原点：顶部； } .集装箱图片：悬停{ 过滤器：灰度100%； }

---

我正在更改图像，因为使用的图像对我无效…@Temaniaff这就是我将filtergray改为filtersepia以显示悬停效果的原因

<div id="one">
<img src="https://cdn.pixabay.com/photo/2019/01/19/15/53/ice- 
3941906_1280.jpg">
 </div>
<div id="two">
<img src="https://cdn.pixabay.com/photo/2016/04/20/17/02/tuscany- 
1341536_1280.jpg">
</div>

img{
  width: 700px;
  height: 400px;
  object-fit: cover;
}

#one img{
  -webkit-clip-path: polygon(0 0, 0% 100%, 100% 0);
clip-path: polygon(0 0, 0% 100%, 100% 0);
}

#two img{
  -webkit-clip-path: polygon(100% 100%, 0% 100%, 100% 0);
clip-path: polygon(100% 100%, 0% 100%, 100% 0);
}

#one{
  position: absolute;
  z-index: 0;
  top: 0 ;
  left: 0;
}

#two{
position:absolute;
  top: 0px;
  left: 0;
  z-index: 0;
}

#one,
#two{
  filter:grayscale(100%);
}

#one:hover,
#two:hover{
  filter:grayscale(0%);
}