When you have nested HTML elements and apply CSS on the hover event of a child element, the hover event for the parent element may also be triggered.
This isn’t an issue if the parent has a different class, ID, or element type.
However, if the parent shares the same class and element type, it can be challenging to prevent the parent from applying the CSS as well.

Prevent event bubbling.

Here’s a useful trick: You can use the :not selector along with :has to prevent the CSS from being applied to the parent when there is a child element with a hover effect.

This ensures that the hover effect remains isolated to the child element.

element:not(:has(#child:hover)):hover