圆形边框与间距悬停

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%;但事情并没有如我所料。

Answer 1

嗨希望这你想要做什么。我在.image-wrap和pointer-events: auto的img上使用pointer-events: none只有在悬停在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