Question

我使用以下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的解决方案我可以使用。

提前感谢您的帮助！

Answer 1

问题在于用于fill的选择器：

#button:active ~ circle {

这是General Sibling Combinator，在您的情况下，<circle>标记为兄弟姐妹，#button之后，但在您的标记中<circle>是{{1}的孩子}}

您可以使用后代组合器解决此问题：

#button

或儿童组合子：

#button:active circle {

示例：

＆＃13;

#button:active > circle {

＆＃13;

#button-more-people {
  transition: 0.3s ease;
}

#button-more-people:hover {
  transform: scale(1.2);
}

#button-more-people:active circle {
  fill: #D50000;
}

＆＃13;

单击时更改html svg cricle的css填充

1 个答案: