Question

我正在尝试添加一些应该在悬停时改变颜色的社交媒体按钮，我在svg标签内部有一个圆圈，当我尝试添加悬停时，如果我将鼠标放在圆圈的“边框”上，它就会起作用。这是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

我认为您的问题是图像，您的代码正常工作，但内部图像无效。

检查此示例：

＆＃13;

svg:hover circle {
    fill: red;
}

＆＃13;

<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>

＆＃13;

我所做的是将悬停应用于父级。我引用了另一张图片，因为你没有包含它。如果您在使用图片时无法应用此解决方案，请将其包含在此处，以便让我们了解该特定图片的内容。

svg circle hover仅适用于边框

1 个答案: