如我的代码笔所示,有两个灰度形状。现在只能悬停两者之一,因为原始大小是一个框并且与两个图像重叠。 但是有没有一种方法可以在悬停时喜欢识别形状? Z-index 不会导致结果... 希望你能帮我一点忙! 没有 JS 会很棒,但它不是 k.o.
html:
<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>
CSS:
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%);
}
https://codepen.io/robwe30/pen/eXBvzp?editors=1100
干杯
最佳答案
对于这个简单的形状,您可以使用 pointer-events
来移除它,然后旋转一个伪元素以仅在图像的一部分上将其重新打开。
关于指针事件 https://css-tricks.com/almanac/properties/p/pointer-events/
例子
/* CSS switch of pointer-events on/off */
#two {
position: relative;
overflow: hidden;/* hide pseudo overflowing */
pointer-events: none;
}
#two:before {
pointer-events: auto;
content: '';
position: absolute;
top: 100%;
left: 0;
z-index: 2;
width: 150%;
height: 100%;
/* set transform according to ratio image */
transform-origin: top left;
transform: rotate(-30deg);
/* if you want to see where it stands , add borders or background */
}
/* end CSS switch */
img {
width: 700px;
height: 400px;
object-fit: cover;
display: block;/* avoids gap underneath */
}
#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: sepia(100%);/* demo purpose */
}
#one:hover,
#two:hover {
filter: grayscale(0%);
}
<div id="one">
<img src="https://picsum.photos/800/600?image=1060">
</div>
<div id="two">
<img src="https://picsum.photos/800/600?image=1065">
</div>
关于javascript - css 剪辑路径只悬停在形状上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55008365/