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

Determine whether a WebElement contains a particular content within the :after pseudo class

Error: The function "this.state.data.map" is not defined in ReactJS

When inserting <img>, unwanted gaps appear between div elements

Material-UI takes charge by overriding React Emotion guidelines

React and Material UI: Ensuring Proper Whitespace Handling in Strings

Load a page and sprinkle some contents with a slide effect

What is the reason behind the necessity for a React class component to always invoke super(props) within its constructor function?

When using React router, I'm experiencing a redirection issue where instead of being directed to the /login route,

The function useDispatch or useSelector appears to be malfunctioning

"Enhance User Experience with a Bootstrap Dropdown Button Offering Block Level Function

The div is struggling to contain the image, can anyone assist with this issue?

The query executed with UseApolloClient does not fetchMore results

Implementing image loading within an accordion component using React and Material UI

Internet Explorer experiencing difficulties displaying elements

Tips on maintaining and hiding the vertical scrollbar when a popup is open, alongside the navigation bar positioned at the top of the page

What is the best way to extract the value from a Material UI Slider for utilization?

Concealing the ellipsis in the will_paginate function of Rails

How to Keep Images Within Table Borders From Overlapping?

Prevent a React component from unnecessarily re-rendering after a property has been set

Enhancing performance with NextJS 13 memoization for fetch requests