@Tantbpv

Продвинутое использование :hover в css. Можно ли взаимодействовать с другими элементами DOM дерева?

Начал экспериментировать со свойством :hover в css и столкнулся с проблемой.
Предположим есть вот такая верстка - //jsfiddle.net/xvscv15c/
Задача: при наведении курсора на красный квадрат остальные квадраты должны исчезать.

Поверхностное чтение документации и гугление меня не удовлетворило.
Можно ли взаимодействовать с другими элементами дом дерева (по аналогии i:hover:after {...}). Если нет, то почему?

P.S. использование JS не предлагать.
  • Вопрос задан
  • 1435 просмотров
Решения вопроса 3
@IllusionTurtle
можно немного иначе:
jsfiddle.net/xvscv15c/2
Ответ написан
andykov
@andykov
Shit happens
потому что в CSS нет селектора по родителю

в вашем примере можно сделать например так jsfiddle.net/xvscv15c/1, но заметьте, что срабатывает только для последующих элементов, но не для предыдущих
Ответ написан
Ronnie_Gardocki
@Ronnie_Gardocki
Я у мамы фронтендщик.
В CSS селекторы могут влиять только на:
1) Потомков (parent > one-level-below-child / parent child-on-any-level-below).
2) Правостоящих (или нижестоящих, кому как удобнее) соседей и их потомков, с помощью селекторов '+' (следующий за элементом сосед) и '~' (стоящий где угодно сосед после элемента).
el1 + el2 / el1 ~ el15 / el1 ~ el42 > el42child
codepen.io/suez/pen/XJGOyL - вот демка, где я как раз хорошо использовал ~ селектор, для того сделать все на чистом css с помощью :hover
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы