Модуль CSS `: hover .child` не работает
У меня есть следующие scss:
.skillBox {
position: relative;
border-radius: 10px;
border: 1px solid #ccc;
box-shadow: 0 2px 20px #ccc;
padding: 1em;
&:hover {
padding: 3em;
.d-none {
display: inline-block !important;
}
}
&:hover .d-none {
display: inline-block !important;
}
}
При наведении курсора я получаю padding:3em, но ни вложенное, ни встроенное дочернее правило не работали, т.е. класс .d-none не был переопределен.
Как правильно написать правило с помощью модуля CSS?
Я пробую модуль CSS с CRA и настраиваемые сценарии реакции с включенными sass и modules (REACT_APP_SASS_MODULES=true).
Или, может быть, мне лучше использовать styled components? Пытался выяснить, какое из них выбрать для приложений реагирования.
Ответы 4
В вашем CSS нет ничего плохого. См. Демонстрацию ниже.
.skillBox {
position: relative;
border-radius: 10px;
border: 1px solid #ccc;
box-shadow: 0 2px 20px #ccc;
padding: 1em;
.d-none{
display: none;
}
&:hover {
padding: 3em;
.d-none {
display: inline-block;
}
}
}
В случае, если элементы с классом skillbox и d-none являются братьями и сестрами, ниже приведен css для этого
.skillBox {
position: relative;
border-radius: 10px;
border: 1px solid #ccc;
box-shadow: 0 2px 20px #ccc;
padding: 1em;
&:hover {
padding: 3em;
}
}
.dnone {
display: none;
}
.skillBox:hover ~ .dnone {
display: inline-block;
}
Итак, я понимаю, что модули CSS создали настраиваемое имя класса для .d-none, и применение этого имени класса сработало.
Поэтому я полностью изменил имя класса, сделав его совершенно новым классом, который переопределяет .d-none.
.skillBox {
position: relative;
border-radius: 10px;
border: 1px solid #ccc;
box-shadow: 0 2px 20px #ccc;
padding: 1em;
&:hover {
.dNone {
display: inline-block !important;
}
}
}
И применяем, добавляя их как массив, а затем объединяя их вместе:
<i className = {['fas fa-times-circle d-none', styles.faTimesCircle, styles.dNone].join(' ')} onClick = {this.onDelete} />
вы можете попробовать этот код, чтобы решить вашу проблему
.skillBox {
position: relative;
border-radius: 10px;
border: 1px solid #ccc;
box-shadow: 0 2px 20px #ccc;
padding: 3em;
background: red;
&:hover {
&.d-none {
background: black;
color: #fff;
padding: 20px;
}
}
}
.d-none {
background: green;
color: #fff;
padding: 20px;
}
<div class = "skillBox">
Parrent
<div class = "d-none">Childred</div>
</div>
Я думаю, ваш CSS выглядит правильно. Небольшой совет - если вам нужно настроить приложение create-react-app, чтобы вы были довольны работой с ним, не используйте create-react-app. Вы теряете многие преимущества, как только сойдете с ним вне трассы.