How do I change svg color while hovering its parent div?

anshul 0
Viewed 25

I have one use-case where the HTML is nested as this :

<button className="btn">
  <span>
    <img className="logo" src={require("./like.svg").default} />
  </span>
Like
</button>

The button is a simple button with an icon at the beginning.

The svg is a like/love icon with a white background color. The hovering on an svg works as this :

// filter property is responsible for colors on svg element.
.logo {
  filter: invert(43%) sepia(0%) saturate(1%) hue-rotate(198deg)
    brightness(94%) contrast(94%);
}

Similarly, if I want to change color of an SVG icon while hovering , I can do it like this:

.logo:hover {
  filter: /<a different color>/
}

Now, What I want is to trigger .logo:hover when I'm hovering on the btn itself.

Meaning, while hovering the button, the SVG icon should also behave the similar hover color.

How can I achieve this?

Thanks for reading

svg css html
1 Answers

Use a CSS selector that targets a .logo child of a hovered .btn:

.btn:hover .logo {
  filter: /<a different color>/
}
ray hatfield0
Related