В следующем. js, используя css, как мне настроить таргетинг на дочерний элемент, когда его родители наведены? - PullRequest
Новая
       13

В следующем. js, используя css, как мне настроить таргетинг на дочерний элемент, когда его родители наведены?

0 голосов
/ 16 июня 2020

Это css, который нацелен на дочерний элемент «#overlay», когда наведен курсор на родительский элемент «.collection». 

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

Свойства не применяются к дочернему элементу при наведении курсора на родительский.

1 Ответ

2 голосов
/ 16 июня 2020

Проблема в том, что по умолчанию Next. js использует css модуль при импорте css из компонентов, это означает, что импорт css вернет объект с классом и картой идентификаторов в 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>
...