Today, when creating a website for a client, I came across the need to create a certain condition where I needed to change the color of an svg image (a loupe svg icon) when the mouse hovers over its parent wrapping box, that is, the mouse does not have to be directly on top of the image.
As is known, CSS does not support if/else conditions. Well, not so directly.
What you have to do is evaluate in the selector path if the element is hovered, and then apply the style you want to the target element, like so:
div.fancy-box:hover > div > img.custom-icon{
filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}
