悬停父级时如何更改图像的css答案

【问题标题】：How to change css of img when hovering parent悬停父级时如何更改图像的css
【发布时间】：2022-11-13 01:32:46
【问题描述】：

虽然我已经看过关于这个主题的几篇文章，但它似乎对我不起作用。我有：

.button-icon {
  height: 25px;
}
.button-type .wp-block-button__link{
  color: #33FFFF;
  background-color: #FF0000;
  border-color: #33FFFF;
  border-bottom-style: solid;
}
.button-type .wp-block-button__link:hover{
  color: #fff;
  background-color: #FF9999;
  border-bottom-color: #FF9999;
}
.button-type .wp-block-button__link:hover img * {
  filter: brightness(0) invert(1) !important;
}

<div class="wp-block-button button-type">
  <a href="/link/" class="wp-block-button__link">
    <img class="button-icon" src="https://upload.wikimedia.org/wikipedia/commons/1/13/Font_Awesome_5_regular_play-circle.svg"> Go
  </a>
</div>

我想让它在鼠标悬停在父元素上时应用过滤器（所以当你移到“Go”上时）。我究竟做错了什么？ svg 图像在鼠标悬停在父元素上时不会改变颜色...

【问题讨论】：

标签： css svg

【解决方案1】：

去掉img之后多余的*，你需要针对img本身。

.button-icon {
  height: 25px;
}
.button-type .wp-block-button__link{
  color: #33FFFF;
  background-color: #FF0000;
  border-color: #33FFFF;
  border-bottom-style: solid;
}
.button-type .wp-block-button__link:hover{
  color: #fff;
  background-color: #FF9999;
  border-bottom-color: #FF9999;
}
.button-type .wp-block-button__link:hover img {
  filter: brightness(0) invert(1) !important;
}

<div class="wp-block-button button-type">
  <a href="/link/" class="wp-block-button__link">
    <img class="button-icon" src="https://upload.wikimedia.org/wikipedia/commons/1/13/Font_Awesome_5_regular_play-circle.svg"> Go
  </a>
</div>

【讨论】：