Html 当按钮悬停时如何更改svg颜色

我试图在按钮悬停时更改SVG的颜色

我尝试使用button:hover+svg，但似乎不起作用

当我运行CSS时，SVG填充为白色，当我将鼠标悬停在按钮上时，它不工作。我看到它工作的唯一方法是，如果我不将初始填充设置为橙色，让它为黑色

怎么了

.盒子按钮{ 边框：1px实心橙色； 颜色：橙色； 填充：15px 0px； 文本对齐：居中； 保证金：5px 5px； 宽度：90%； 字号：1.2rem； } .box按钮：悬停{ 背景颜色：橙色； 颜色：白色； } .box按钮：悬停+图标svg{ 填充：白色！重要； } .图标svg{ 填充物：橙色； } 你的命令 +是CSS同级选择器。图标svg不是按钮的同级，而是一个子按钮

此外，在按钮中添加div是无效的，但大多数浏览器都会将其呈现为良好状态。我把它改成了一个跨度

尝试使用.box按钮：hover.icon svg代替.box按钮：hover+.icon svg

.盒子按钮{ 边框：1px实心橙色； 颜色：橙色； 填充：15px 0px； 文本对齐：居中； 保证金：5px 5px； 宽度：90%； 字号：1.2rem； } .box按钮：悬停{ 背景颜色：橙色； 颜色：白色； } .box按钮：悬停.icon svg{ 填充：白色！重要； } .图标svg{ 填充物：橙色； } 你的命令 有关参考，请参阅。