在 next.js 中，使用 css，當其父元素懸停在其上時，如何定位子元素？

Question

這是 css，當父元素“.collection”懸停時，它以子元素“#overlay”為目標。

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

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

這是 html：

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

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

當父元素懸停時，這些屬性不會應用於子元素。

Answer 1

The problem is that by default Next.js uses css module when importing css from Components, that means that import of css will return an object with class & id map to uglified strings.

您需要使用 class 選擇器並在子組件上使用它。

.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>