我正在使用以下 svg 绘图作为按钮:
<svg id="button-more-people" style="width: 60px; height: 60px;">
<circle cx="30" cy="30" r="30" fill="#F44336" id="circle-button-more-people"/>
<text fill="#ffffff" font-size="45" x="11" y="44" font-family="Verdana">+</text>
</svg>
当鼠标悬停在圆上时,我通过 css 将按钮放大:
#button {
transition: 0.3s ease;
}
#button:hover {
transform: scale(1.2);
}
我似乎无法实现的是在单击按钮时更改按钮颜色。我尝试了以下方法,但无济于事:
#button:active ~ circle {
fill: #D50000;
}
如果有一个我可以使用的无 javascript 解决方案,我会更愿意。
提前感谢您的帮助!
最佳答案
问题出在用于 fill
的选择器中:
#button:active ~ circle {
这是 General Sibling Combinator在您的情况下匹配 <circle>
#button
之后的兄弟标签,但是在您的标记中 <circle>
是 #button
的 child
您可以使用后代组合器解决此问题:
#button:active circle {
或者子组合器:
#button:active > circle {
例子:
#button-more-people {
transition: 0.3s ease;
}
#button-more-people:hover {
transform: scale(1.2);
}
#button-more-people:active circle {
fill: #D50000;
}
<svg id="button-more-people" style="width: 60px; height: 60px;">
<circle cx="30" cy="30" r="30" fill="#F44336" id="circle-button-more-people"/>
<text fill="#ffffff" font-size="45" x="11" y="44" font-family="Verdana">+</text>
</svg>
关于html - 单击时更改 html svg cricle 的 css 填充,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46248751/