Смежный сиблинг не работает - Серии CSS3

96
7

Я хочу сделать :hover изменения на дочерний элемент.

Скажем, у меня есть ниже HTML:

<div class="wrap">
<div class="adjacent_sibling">Placeholder text</div>
<div class="adjacent_sibling class">Placeholder text</div>
</div>

Я могу внести изменения в дочерний элемент с CSS следующим образом:

.wrap:hover .class {
/*CSS to come here*/
}

но я не могу вносить такие изменения:

.wrap:hover + .wrap > .adjacent-sibling{
/*CSS to come here*/
}

или:

.wrap:hover + .adjacent-sibling {
/*CSS to come here*/
}

Как это можно достичь? Мне нужно настроить таргетинг на соседнего брата, если это ребенок (дети). Это только для учебных целей.

спросил(а) 2021-01-19T16:45:05+03:00 2 месяца, 3 недели назад
1
Решение
96

+ Относится к соседнему элементу, а не к дочерним.

Если вы хотите, чтобы это было так:

.wrap:hover > .adjacent-sibling,
.wrap > .adjacent-sibling {
/*CSS to come here*/
}

или же:

.wrap:hover > .adjacent-sibling {
/*CSS to come here*/
}

Изменить: как целевые соседние братья и сестры у детей:

.wrap:hover > .adjacent-sibling + .adjacent-sibling.class {
/*CSS to come here*/
}

ответил(а) 2021-01-19T16:45:05+03:00 2 месяца, 3 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема