如何通过其父级触发子级 object 上的 hover 事件？

Question

I have written a custom react component which has an animation on:hover. This component is a child of a different parent component. What I would like to do is to trigger child's :hover when hovering over parent's component. Is it possible to simulate it via css (if it isn't then how can it be achieved)?

Test Case: I have a blog post card that when hovering on lightens up. Within it, in form of a child element I have a Link/a component which has its own css/:hover animation and also upon clicking redirects to a given href page. The effect that I would like to achieve is to animate both elements (and not only parent element) when hovering on parent as well as triggering child's click event when clicking on the parent.

Answer 1

If you can share the code would be easier to explain but what you can do is in your parent component main wrapper/div you can set onMouseEnter event and inside this event you can set a boolean state. Then in your main wrapper/div in childs component you can get className as props and you can set conditional classNames controlled by this state (true or false) and do necessary modifications in your css.

An example for conditional className

className={`${isOnHover ? "hoverClass" : "noHoverClass"}`}