我在更改 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>
类似:
.round:hover .svg {
filter: brightness(1000%) saturate(0%) contrast(1000%);
}