CSS Techniques with React: Leveraging the Parent Hover State in a Child Component

Creating dynamic hover effects within a component can be challenging — especially when the hover state of a parent component needs to affect a dynamic child component.

Here, I’ll show how to use CSS to apply hover effects to a child component based on the hover state of its parent component.

An Example

Let’s look at a simple example. Below, the blue square renders might render either a success child component (with a green checkmark) or a failure child component (with a red x). On hover, the success child component displays the text “SUCCESS HOVER CONTENT.” The failure child component shows “FAILURE HOVER CONTENT.”

The Solution

Here’s how you can use the hover state of the parent to render hover content in the children. I’ll use React and CSS modules in this example, but you can apply the same concept to raw HTML and CSS.

Create a static className for the parent.

To start, create a static className for the hoverable parent component. In this example, let’s use the className outerComponent for the parent square. We’ll need to reference this className in the child component.

This must be a static className and not a generated CSS module className. Why? Because we’ll need to know what this className is in the child component.  And, in the real world, the child component might live in a different repository and have different local className generation rules.  So, it’s most foolproof to use a static global className.

Create child content to display on hover.

In the child component, we’ll create the content to display when the parent component is being hovered on. In this example, the success child component renders the “SUCCESS HOVER CONTENT!” on hover of the parent component, and the failure child component renders “FAILURE HOVER CONTENT!” on parent hover. We’ll then add a className to this content. This className can be a generated local CSS module className because we won’t need to reference it anywhere else.

In this example, both the success and failure content will have the className showMeOnHover. By default, we’ll hide all content to be displayed on hover:

.showMeOnHover {
// ...other styles
display: hidden
}

Display child content on parent hover.

In the CSS for the child component, add a rule to display the child content when you hover over the parent component. Here is where we’ll need to reference the static parent className (in this example, outerComponent) without hashing it into a local modular className. To indicate that the className is a static global className, wrap it with global like :global(outerComponent).

Next, we’ll just need to to make the content in showMeOnHover as visible when the outer component is hovered over:

:global(.outerComponent:hover) .showMeOnHover {
visibility: visible;
}

With that, success or failure text will now show up when hovering over the outer square!

This example is available on GitHub and CodeSandbox.

You can apply this pattern to any scenario where you have a child component that should be affected (render something, change color, etc.) when hovering on the parent component.