How can I use CSS in Next.js to style a child element when its parent is being hovered over?

Question

How can I use CSS in Next.js to style a child element when its parent is being hovered over?

Here is the CSS code that specifically targets the child element "#overlay" when its parent, ".collection", is being hovered over:

.collection {
    position: relative;
    overflow: hidden;
}

.collection:hover #overlay { 
    position: absolute;
    opacity: .3;
}

And this is the corresponding HTML:

import styles from "./Home.module.css";

<div className={`${styles.collection} card`}>
    <div id="overlay"></div>
</div>

However, it seems that the properties are not being applied to the child element when the parent is in hover state.

css reactjs next.js

Answer 1

Answer №1

One issue is that Next.js by default utilizes css module when importing css from Components, resulting in an object with class & id map to cryptic strings.

To address this problem, you must employ the class selector and apply it on the child component.

.collection {
    position: relative;
    overflow: hidden;
}

.collection:hover .overlay { 
    // -----------^
    position: absolute;
    opacity: .3;
}

import styles from "./Home.module.css";

<div className={`${styles.collection} card`}>
    <div id="overlay" className={styles.overlay}></div>
    // --------------------------------^
</div>

Answer 2

One issue is that Next.js by default utilizes css module when importing css from Components, resulting in an object with class & id map to cryptic strings.

To address this problem, you must employ the class selector and apply it on the child component.

.collection {
    position: relative;
    overflow: hidden;
}

.collection:hover .overlay { 
    // -----------^
    position: absolute;
    opacity: .3;
}

import styles from "./Home.module.css";

<div className={`${styles.collection} card`}>
    <div id="overlay" className={styles.overlay}></div>
    // --------------------------------^
</div>

How can I use CSS in Next.js to style a child element when its parent is being hovered over?

Answer №1

Similar questions

What is the best way to maintain the same height for a textarea and input fields?

The data-toggle function is not functioning properly with the code provided

Arranging items in a vertical column using CSS based on the content

Template for developing projects using JavaScript, HTML5, and CSS3 in Visual Studio 2013

Problem with the appearance of the drop-down menu

Flexbox - Consistent height image columns

Tips for utilizing "useEffect" and "useCallback"?

Steps for launching a hyperlink in a browser on Vue Native

Exploring Next.js 13: Tailoring Next.js layouts to suit your route structure

What causes Next.js code lifecycle to run multiple times?

The module specifier for React could not be resolved when attempting a dynamic import from the API

Unable to save input from <from> in the React state object

Using Express and React with Socket.io

Creating individual components for <select> and <option> elements in ReactJS

Sorting Contentful posts by date across various Content types

What could be causing my absolutely positioned div to be hidden from view?

Html content overlapping div rather than being stacked vertically

Including a logo and navigation bar in the header while collaborating with different subregions

What causes offsetHeight to be less than clientHeight?

Changing the checkbox state using react JavaScript