我正在尝试在按钮悬停时更改 SVG 的颜色。
我尝试使用button:hover + svg,但这似乎不起作用。
当我运行 CSS 时,SVG 填充为白色,当我将鼠标悬停在按钮上时它不起作用。我看到它工作的唯一方法是,如果我不将初始填充设置为橙色并让它为黑色。
怎么了?
.box-button {
border: 1px solid orange;
color: orange;
padding: 15px 0px;
text-align: center;
margin: 5px 5px;
width: 90%;
font-size: 1.2rem;
}
.box-button:hover {
background-color: orange;
color: white;
}
.box-button:hover+.icon-svg {
fill: white !important;
}
.icon-svg {
fill: orange;
}Run Code Online (Sandbox Code Playgroud)
<button class="box-button">
<div class="svg-container">
<svg class="icon-svg" enable-background="new 0 0 612 792" version="1.1" viewBox="0 0 612 792" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<path d="m82.983 432.29c-5.728 0-10.372 4.644-10.372 10.372v41.488c0 5.729 4.644 10.373 10.372 …Run Code Online (Sandbox Code Playgroud)