How to change css of img when hovering parent

November 12, 2022

Although I’ve seen several posts on this topic, it doesn’t seem to work for me. I have:

.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>

I would like to have it apply the filter upon mouse-over on the parent element (so when you move over "Go"). What am I doing wrong? The svg image doesn’t change color on mouse-over of the parent element…

>Solution :

Remove the extra * after img, you need to target the img itself.

.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>