Стайлинг изображений при наведении курсора

Используйте селектор CSS для стилизации соседних изображений при наведении курсора.

Обычно вам понадобится JavaScript для стилизации всех братьев и сестер элемента, с которым вы взаимодействуете. Но ждать! Есть классный метод, основанный на 100% CSS.

Короче говоря, идея состоит в том, чтобы нацелиться на: hover родительского элемента, а затем нацелить его на всех дочерних элементов, кроме того, над которым вы наводите курсор.


.parent:hover .child:not(:hover) {
  /* this style affects all the children except the one you're hovering over */
}

Вот пример:

Вот и всё!


🔖 Выбор по тегам ×

Top