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