Условные операторы CSS с наведением
Этот вопрос может быть проще в условном CSS.
У меня есть пять строк с некоторым содержимым, и на основе некоторого условия я добавляю класс с именем 'предыдущий', чтобы показать другой цвет фона.
Когда я наводил курсор на содержимое предыдущего класса, я получаю прозрачный фон, что не очень хорошо.
Я хотел показать тот же цвет фона (серый), даже если он наведен.
Итак, я попробовал приведенный ниже код и попытался использовать условие :имеет в css. Если у него есть предыдущий класс, измените цвет наведения на серый. Но это не сработало.
Я ожидаю, что у меня будет тот же цвет фона, даже если он наведен.
Может ли кто-нибудь помочь мне в этом, так как мне нужно решение только от CSS/SCSS. не из джаваскрипта.
.previous {
background-color: grey;
}
.row:hover {
background-color: transparent;
:has(.previous) {
background-color: grey;
}
}<div class = "row">Some Content 1</div>
<div class = "row previous">Some Content 2</div>
<div class = "row">Some Content 3</div>
<div class = "row previous">Some Content 4</div>
<div class = "row">Some Content 5</div>
Ответы 3
Вы можете сделать это, используя псевдокласс :not, чтобы исключить строки с классом previous из эффекта наведения. Теперь :hover будет выполняться для каждого элемента, который имеет класс .row, но не имеет класса .previous.
.row {
background-color: lightblue;
}
.previous {
background-color: grey;
}
.row:not(.previous):hover {
background: transparent;
}<div class = "row">Some Content 1</div>
<div class = "row previous">Some Content 2</div>
<div class = "row">Some Content 3</div>
<div class = "row previous">Some Content 4</div>
<div class = "row">Some Content 5</div>Красный используется только для демонстрации, чтобы лучше продемонстрировать эффект, который вы можете использовать в своем коде любого цвета, здесь дело в селекторе.
Почему бы просто не изменить порядок ваших селекторов и добавить зависание к предыдущему классу:
.row:hover {
background-color: transparent;
}
.previous,
.previous:hover {
background-color: grey;
}<div class = "row">Some Content 1</div>
<div class = "row previous">Some Content 2</div>
<div class = "row">Some Content 3</div>
<div class = "row previous">Some Content 4</div>
<div class = "row">Some Content 5</div>Кроме того, если вам нужна строка с предыдущим классом, вы просто комбинируете селекторы: .row.previous
:has это css4 и очень мало поддерживается: https://developer.mozilla.org/en-US/docs/Web/CSS/:has
Отличное решение Пит :) Спасибо
Вот чистое решение css.
Вы можете установить разные стили для наведения, независимо от того, имеет ли он предыдущий класс или нет.
.row:hover {
background-color: transparent;
}
.row.previous {
background-color: grey;
}
.row.previous:hover {
background-color: #595959; /*any color really*/
}<div class = "row">Some Content 1</div>
<div class = "row previous">Some Content 2</div>
<div class = "row">Some Content 3</div>
<div class = "row previous">Some Content 4</div>
<div class = "row">Some Content 5</div>
Спасибо, нам нужно изменить цвет фона на прозрачный, чтобы он работал :) Престижность за использование: не условие :)