svg circle hover只能在邊框上工作

Question

我想添加一些社交媒體按鈕，應該改變懸停的顏色，我有一個svg標籤內的圓圈，當我嘗試添加懸停時，它只是工作，如果我把鼠標放在圓圈的「邊界」。 Here's的HTML

<svg> 
    <circle cx="50%" cy="50%" r="20" fill=#009ddf /> 
    <image x="20%" y="23%" width="30" height="30" xlink:href="images/svg/facebook.svg"/> 
</svg> 

和CSS

svg circle:hover { 
    fill: red; 
} 

誰能告訴我該怎麼做就全圈徘徊？已經嘗試過在svg上做它，但它有一個矩形，圓圈在裏面也會改變顏色。另一個問題是我可以使svg標籤輪？

Answer 1

我認爲你的問題是圖像，你的代碼工作正常，但裏面的圖像沒有效果。

檢查這個例子：

svg:hover circle { 
 
    fill: red; 
 
}

<svg> 
 
    <circle cx="50%" cy="50%" r="40" fill=#009ddf /> 
 
    <image x="45%" y="40%" width="30" height="30" xlink:href="https://en.facebookbrand.com/wp-content/themes/fb-branding/prj-fb-branding/assets/images/thumb-drawn.svg"/> 
 
</svg>

我做了什麼是應用懸停在父來代替。 我引用了另一張圖片，因爲您沒有包含它。如果您在使用圖像時應用此解決方案時遇到問題，請將其包含在此處，讓我們看看該特定圖像上發生了什麼。