arrow-left
Вернуться к продуктам
Кратко о видео
В уроке разобрана механика контекстных селекторов: выбор родительского блока, переключение состояния на «при наведении», выбор дочернего элемента для редактирования его стилей в контексте hover-родителя, добавление transition для плавности. Это не анимация, а стили состояния: при наведении на родителя дочерний элемент получает другой класс или другое значение свойства. Контекстный селектор в CSS — это `.parent:hover .child { ... }`. В Taptop это делается через интерфейс без написания кода. Урок для всех, кто делает интерактивные карточки и блоки, где при наведении меняется не сам элемент, а что-то внутри него. Понимание базовой структуры «родитель-потомок» в HTML и принципа работы hover в CSS поможет понять логику быстрее.

Состояние элемента и контекстные селекторы: краткий обзор

Хочешь: при наведении на карточку одновременно менялись заголовок, кнопка и фон. Но hover на каждом элементе по отдельности — это три разные настройки. Есть ли способ сделать всё через одно?
Контекстный селектор: выбрать родительский блок → переключить на «при наведении» → выбрать дочерний элемент → задать стили. Сработает при наведении на родителя. Transition добавляется дочернему элементу. Для всех. После просмотра управляешь анимацией нескольких вложенных элементов через одну настройку на родителе.
Тайминги видео
00:00 — Многие спрашивают, что такое контекстные селекторы 01:02 — родительского блока состояние при наведении. Вроде 02:03 — наведения родительского блока. Правда, не хватает 03:01 — стороны. И видим, что картинка увеличилась

Другие продукты академии

Как выйти на фриланс
Разберётесь, как брать первые проекты, называть цену и общаться с клиентами
Для кого
Специалистов
Направление
Фриланс
Формат
Мини-курс
Длительность
13 уроков
Taptop с нуля: сайт-портфолио
Осваиваете базу Taptop и собираете сайт-портфолио, который можно оставить себе
Для кого
Новичков
Направление
Вёрстка
Формат
Мини-курс
Длительность
9 уроков
Как дизайнеру понять вёрстку
Разберётесь, как устроены сайты, чтобы увереннее работать с ними дальше
Для кого
Новичков
Направление
Вёрстка
Формат
Интенсив
Длительность
2 урока
Как собрать сложную анимацию
Собираете сложную анимацию и плавный переход между страницами
Для кого
Для тех, кто в теме
Направление
Анимации
Формат
Интенсив
Длительность
2 урока