在 next.js 中，使用 css，当子元素的父元素悬停在其上方时，如何定位子元素？

Question

当父元素“.collection”悬停时，这是针对子元素“#overlay”的 css。

.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

问题是，默认情况下，Next.js 在从组件导入 css 时使用css 模块，这意味着导入 css 将返回一个带有类和 id 映射到丑化字符串的对象。

您需要使用类选择器并在子组件上使用它。

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