圆形边框与悬停间距

Question

用图片更容易解释，看这里是我想要实现的目标。

当鼠标盘旋在盒子上方时，我想在灰色图像周围画一个圆形边框。图像本身已被剪裁路径裁剪如下：

clip-path: circle(65px at center);

标记的其余部分如下：

<div class="artist-card">
  <div class="image-wrap">
    <img src="http://placehold.it/130x130" alt="artist name"/>
  </div>
</div>

我尝试通过在框中添加:hover条件来自行完成，然后使用.image-wrap和padding: 5px;定位border-radius: 50%;，但事情没有＆＃39按照我的预期去做。

Answer 1

嗨希望这可以做你想要的。我使用pointer-events: none上的.image-wrap和pointer-events: auto上的img仅在将鼠标悬停在img上时触发边框。

img {
  margin: auto;
  display: block;
  clip-path: circle(65px at center);
  pointer-events: none;
}

.image-wrap {
  display: flex;
  align-items:center;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 3px solid transparent;
  pointer-events: none;
}

.artist-card {
  pointer-events: auto;
  background: grey;
  width: 155px;
  height: 155px;
}

.image-wrap:hover {
  border-color: yellow;
}

.artist-card:hover .image-wrap {
  border-color: yellow;
}

<div class="artist-card">
  <div class="image-wrap">
    <img src="http://placehold.it/130x130" alt="artist name"/>
  </div>
</div>

Answer 2

也许这些链接可以提供帮助：

https://tympanus.net/codrops/2012/08/08/circle-hover-effects-with-css-transitions/

http://gudh.github.io/ihover/dist/

CSS create border on hover arround filled circle with empty space between circle and border