按鈕CSS內的SVG顏色變化

Question

我在更改 SVG 和按鈕的顏色時遇到了麻煩。 當我將鼠標懸停在帶有 SVG 的按鈕上時，我希望 SVG 顏色發生變化，現在它只在我將鼠標懸停在該按鈕內的 SVG 圖像上時才起作用。 這是我到目前為止所得到的：

 .round { display: inline-block; width: 120px; line-height:118px; background-color: rgba(100, 100, 100, 0); border:2px solid #0090ff; -webkit-border-radius: 200px; -moz-border-radius: 200px; border-radius: 200px; cursor:pointer; -webkit-transition: all .2s ease-out; -moz-transition: all .2s ease-out; } .round:hover { background-color: #00aaee; border:2px solid #0080b3; } .svg:hover { filter: brightness(1000%) saturate(0%) contrast(1000%); }

 <a href="/category/aktualnosci/" class="round"><img class="svg" src="/wp-content/uploads/2019/12/gazeta.svg" width="60" height="60"></a><br>

Answer 1

類似於： .round:hover .svg { filter: brightness(1000%) saturate(0%) contrast(1000%); } .round:hover .svg { filter: brightness(1000%) saturate(0%) contrast(1000%); }