Задача со звездочкой
Дано: две карточки, потомки общего контейнера.
В карточках картинка + кнопка
При наведении мыши на карточку, картинка в соседней карточке должна стать черно-белой.
С правой колонкой все ясно, мы пишем (можно + заменить на ~ ):
.brand-item:hover + .brand-item .brand-img {
filter: grayscale(1);
}
"Я даже могу поставить тут анимацию", - думает радостный разработчик. Однако, это будет работать только если навести мышь на левую карточку. Почему же это не работает справа?
Итак, при наведении мыши на правую карточку левая не меняется, потому что CSS - это каскадные таблицы стилей. CSS работает сверху вниз и слева направо. На чистом CSS задачу решить невозможно.
Решение: для потомков пишем <div class="brand-item brand-item-left" onmouseover="скрипт, который меняет стили всех потомков контейнера" onemouseout="скрипт, который меняет обратно стили всех потомков">
Мы, как взрослые люди, используем функции, а вернее функции-коллбэки для таких случаев.