Хочу рассказать вам об очень полезном инструменте CSS — псевдоклассах. Надеюсь, вам будет полезен этот материал.
Недавно передо мной встала задача при наведении и клике на один элемент изменить стили другого.
За стили при наведении и клике отвечают псевдоклассы. Псевдокласс в CSS — это ключевое слово, которое добавляют к селектору. Оно определяет его особое состояние.
Существует несколько псевдоклассов. Самые популярные это:
- hover
- active
- focus
- link
- visited
- checked
- first
На самом деле, их очень много, и это только малая часть.
Чаще всего стили через псевдоклассы меняют у кнопок и ссылок, чтобы пользователю было проще понять, что по клику на данный элемент, произойдёт некоторое действие. Но также часто псевдоклассы вешают на кнопки меню, и при наведении или клике появляется новый блок или один блок меняется на другой. Получается очень интересный эффект.
Применить псевдокласс к селектору очень просто. Для этого указываем название селектора, двоеточие и псевдокласс: селектор:псевдокласс.
В панели разработчика стили элемента с псевдоклассом можно посмотреть, кликнув на кнопку :hov:
CSS псевдокласс :hover, думаю, самый популярный. Он срабатывает, когда пользователь наводит на элемент мышью, но не обязательно активирует его. Как мы помним CSS — каскадная таблица стилей. Поэтому стиль, определённый псевдоклассом, может переопределяться другими псевдоклассами. Например :link, :visited, :active.
Чтобы избежать этого, правило с :hover должно идти после правил с :link и :visited, но до :active. Это определено LVHA-порядком: :link — :visited — :hover — :active.
Разберём, как работать с :hover в Insight. Применить псевдокласс к селектору мы можем, указав стили в теме проекта. Порядок действий может быть таким: запускаем приложение в редакторе, через панель разработчика, находим класс нужного элемента. У меня это была, кнопка, в которую вставлена иконка. Поменять нужно было цвет этой иконки при наведении и нажатии на кнопку. Также нам понадобится класс элемента, стили которого мы хотим менять при наведении. Затем в теме проекта мы пишем такую конструкцию:
.класс:hover {
стили родительского элемнта при наведении
.класс дочернего элемента {
стили дочернего элемента при наведении на родительский
}
}
Хоть в примерах я использую класс в качестве селектора, это совсем необязательно. Селектор может быть любым.
Можно менять стили и для нескольких псевдоклассов. Пример ниже:
.style_sort-btn-right_uMbX6:hover, .style_sort-btn-right_uMbX6:focus {
background: rgba(0, 0, 0, 0) !important;
outline: none;
.style_sort-icon_a8k98>i {
color: #0EBAFF !important;
}
}
В Insight этот способ работает только со вложенными элементами. То есть изменяемый элемент должен был вложен в тот, на который мы наводим курсор мыши. Поэтому поменять стиль соседнего элемента, увы, не получится. Но если вы знаете как это сделать, жду вас в комментариях.
Вот так я решила свою задачу с помощью псевдоклассов. Конечно, про них можно говорить много и долго, но мы, пожалуй, на сегодня закончим. Если у вас есть интересные примеры работы с псевдоклассами, поделитесь, пожалуйста, ими в комментариях.
Спасибо за внимание 