[英]In next.js, using css, how do I target a child element when its parents is hovered over?
This is the css that targets the child element, "#overlay", when the parent, ".collection", is hovered.这是 css,当父元素“.collection”悬停时,它以子元素“#overlay”为目标。
.collection {
position: relative;
overflow: hidden;
}
.collection:hover #overlay {
position: absolute;
opacity: .3;
}
This is the html:这是 html:
import styles from "./Home.module.css";
<div className={`${styles.collection} card`}>
<div id="overlay"></div>
</div>
The properties are not applied to the child element when the parent is hovered.当父元素悬停时,这些属性不会应用于子元素。
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. 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.
You need to use class selector and use it on the child component.您需要使用 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.