时间戳

首页 > 解决方案 > 在 next.js 中，使用 css，当父元素悬停在子元素上时，如何定位子元素？

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

问题描述

这是当父元素“.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>

当父元素悬停时，这些属性不会应用于子元素。

标签： cssreactjsnext.js

解决方案

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

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

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

推荐阅读