将 CSS 悬停在裁剪图像的可见部分

Question

.circle {
  -webkit-clip-path: circle(120px at center);
          clip-path: circle(120px at center);
}

.circle:hover {
  cursor:move;
}

<img src="http://www.publicdomainpictures.net/pictures/10000/nahled/2185-1265776088aCTz.jpg" alt="" class=" circle">

有没有办法让悬停只应用在图像的可见部分？

Answer 1

只有我能看到让它工作的是添加一个包装元素并将剪辑应用于该元素，但将悬停状态应用于内部元素。

.wrapper {
  display:inline-block;
  -webkit-clip-path: circle(120px at center);
          clip-path: circle(120px at center);
}

.circle {
  display:block;
}

.circle:hover {
  cursor:move;
}

<div class="wrapper"><img src="//placehold.it/300" alt="" class=" circle"></div>

将 CSS 悬停在裁剪图像的可见部分

Apply CSS hover just on visible part of a clipped image

css

hover

clip-path