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