时间戳

首页 > 解决方案 > css 剪辑路径仅悬停在形状上

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

问题描述

正如在我的代码笔中看到的，有两个灰度形状。现在只能悬停两者之一，因为原始大小是一个框并且与两个图像重叠。但是有没有办法在悬停时识别形状？Z-index 不会导致结果...希望您能帮帮我！没有 JS 会很棒，但它不是 ko

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

干杯

标签： javascripthtmlcss

解决方案

这是另一个使用更少代码且无需clip-path

.container {
  width: 300px;
  height: 200px;
  position: relative;
  overflow: hidden;
}

.container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.container div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: skewX(-56.3deg); /* tan(angle) = Width/height --> angle = arctan(width/height) */
  transform-origin: top;
  overflow: hidden;
}

.container div img {
  transform: skewX(56.3deg);
  transform-origin: top;
}
.container img:hover{
   filter:grayscale(100%);
}
<div class="container">
  <img src="https://picsum.photos/800/600?image=1069">
  <div>
    <img src="https://picsum.photos/800/600?image=1051">
  </div>
</div>

推荐阅读