maratdev / css:hover
Save maratdev/1210d717e200770f3d488301a71198f3 to your computer and use it in GitHub Desktop.
[CSS] изменить стиль одного элемента при событии другого элемента
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
| ЦЕЛЬ:hover ~ ЖЕРТВА |
| -moz-transition: all 0.5s 0.3s ease-in; |
| -o-transition: all 0.5s 0.3s ease-in; |
| -webkit-transition: all 0.5s 0.3s ease-in; |
| background-color: rgba(0,0,0,0.3); |
| z-index: 2106; |
| > |
| В фигурных скобках прописываем параметры анимации изменения и изменяемые свойства. |
| Есть только два условия, при которых этот способ будет работать: |
| ЦЕЛЬ и ЖЕРТВА должны быть братьями (то есть иметь общий родительский элемент). |
| ЖЕРТВА в коде должна быть ниже ЦЕЛИ. |
События при наведении. :hover, :focus, :active в CSS
CSS-псевдоклассы :hover , :focus и :active задают элементам состояния, которые реализуются при определённых действиях пользователя. Состояния меняют цвет или размер элемента, добавляют ему рамку, делают более интерактивным, выделяют и указывают на его назначение.
�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
В статье рассмотрим, в чём различия состояний, какие элементы важно выделять и как это влияет на доступность сайта.
Основные состояния интерактивных элементов
:hover
Состояние :hover срабатывает, когда пользователь наводит курсор на элемент. Часто используется для создания эффекта взаимодействия с элементом, например, при наведении на ссылку меняется цвет текста. Это даёт пользователю понять, что на элемент можно нажать и получить определённый результат.
.link < color: #000000; >.link:hover
:focus
Состояние :focus срабатывает при клике на элемент или переходе на него с клавиатуры при помощи клавиши tab . Применяется состояния ко всем интерактивным элементам — , , , и элементам с tabindex .
Существует также состояние :focus-visible , которое возникает исключительно при фокусе с клавиатуры. Это состояние улучшает доступность сайта для пользователей с ограниченными возможностями. Если человек перемещается по интерфейсу с помощью клавиатуры, ему важно понимать, где он находится. Поэтому состояние фокуса рекомендуется делать как можно более заметным.
.link < color: #000000; >.link:focus
:active
Состояние :active срабатывает, когда пользователь взаимодействует с элементом, например, когда удерживает кнопку мыши на элементе. Часто используется для создания эффекта «нажатия» на кнопку или ссылку. :active может не сильно отличаться по цвету, так как пользователь знает, с каким элементом взаимодействует.
.link < color: #000000; >.link:active
Как состояния влияют на доступность сайта
Не все пользователи используют мышь, поэтому важно, чтобы по сайту можно было перемещаться при помощи клавиатуры или других альтернативных устройств.
Рекомендуется обязательно указывать состояния :hover , :focus и :active для всех интерактивных элементов, с которыми взаимодействует пользователь. Это позволяет создать доступный и понятный интерфейс.
В формах обратной связи состояние :focus используется для выделения активного поля при навигации с помощью клавиатуры. Это помогает пользователям с ограниченными возможностями корректно заполнять форму.
Когда состояния элементов различаются, пользователю легко понять, где ссылка, а где сейчас находится фокус. Ссылкам лучше указывать разные цвета для :hover и :active , чтобы пользователь мог отличить, какой элемент он выбрал.
Поэтому прописывать все состояния вместе не всегда хорошая идея:
.a:hover, .a:focus, .a:active
Кроме того, в разных браузерах и операционных системах отображение состояний может отличаться, поэтому такой код не будет работать идеально. Лучше полностью разделять состояния и каждому давать свою стилизацию.
.a:hover <> .a:focus <> .a:active <> Также состояния элементов могут использоваться для создания эффектов анимации и визуальных изменений на сайте. Например, при наведении на изображение можно увеличить его размер или добавить эффект тени.
Узнать больше о доступности сайтов и способах её улучшения вы можете на нашем специализированном курсе.
Материалы по теме
- CSS-селекторы. Шпаргалка для новичков
- Как убрать подчёркивание ссылок
- Как сделать всплывающую подсказку
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Как при наведении на один элемент (hover) менять стили другого элемента css?
Как сделать так, чтобы при наведении на один элемент (hover) менять стили другого элемента? Можно ли это сделать только на css? К примеру навожу на блок, хочу, чтобы все заголовки в этом блоке стали другого цвета.
Лучший ответ
если навел на блок, то в этом блоке можно.
.block:hover h2 — для заголовков h2
Максим ТалейниковПрофи (515) 7 лет назад
Можно ли устроить подобный ховер для кнопки, дабы изменялась как она так и например цвет текста
МАСТЕР Мудрец (15758) При попадании мыши на красный блок, сменится цвет текста. Можно и для соседнего. Щас гляну как, по памяти не помню
Как при наведении на элемент менять другой?
У меня проблема с CSS, я сделал 2 кнопки, при наведение на первую вторая меняется; я сделал то же самое, но наоборот и при наведение на второй кнопку, первая не меняется. Как исправить проблему?
Регистрация Вход.button__create-account:hover + .button__login-account < opacity: 0.5; transition: all 0.2s ease-in; >.button__login-account:hover + .button__create-account
- Вопрос задан более трёх лет назад
- 2587 просмотров