更改HTML SVG cricle与CSS填充当

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 { 

这是你的情况相符<circle>标记，是兄弟和button后General Sibling Combinator，但是在标记你有<circle>是的button

一个孩子，您可以使用一个后代组合子：

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