我想使用 CSS 突出显示 SVG 组。我试过下面的代码
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<style type="text/css">
* {stroke: black; fill: white}
.A:hover {fill: orange}
.B:hover {fill: blue}
</style>
<g class="A">
<circle cx="100" cy="100" r="50" />
<circle cx="250" cy="100" r="50" />
</g>
<circle class="B" cx="400" cy="100" r="50" />
</svg>
但前两个圆圈在悬停时不会变成橙色(在 Safari 和 Opera 中)。我做错了什么?
最佳答案
填充将设置在悬停的 <g>
上,但另一个选择器会覆盖圆圈上的填充。
替换:
.A:hover {fill: orange}
与:
.A:hover * {fill: orange}
参见 fiddle .
关于css - 使用 CSS 类样式化 SVG 组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16912447/