円の上にスペーシングがある円形の境界線

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条件を追加することによって、それを自分自身を実行しようとしましたボックスを選択して、padding: 5px;とborder-radius: 50%;との.image-wrapをターゲティングしていましたが、期待したほどのものがありませんでした。

Answer 1

こんにちは、これは何をしたいん願っています。私は.image-wrapでpointer-events: noneを使用し、imgではpointer-events: autoを使用して、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