:hover

    0
    1651

    :hover псевдокласс который устанавливает стили для элементов на которые была наведена мышь, но еще не была нажата.

    Большинство сенсорных устройств не поддерживает :hover. Поэтому использование :hover на сенсорных устройствах может работать не как планировалось.

    :hover является динамическим псевдоклассом, который позволяет создать обратную связь между пользователем и элементом на который он навел, чтобы сообщить что элемент можно активировать. Например, при наведении мыши на ссылку она подсвечивается сообщая пользователю о том, что по ней можно перейти.

    Также :hover часто используют в связке с другими псевдоклассами для оформления ссылок на странице. Всего четыре псевдокласса используют для стилизации ссылок: :hover, :link, :visited, :active.

    Когда используются упомянутые выше псевдоклассы, предпочтительнее использовать их в следующем порядке, чтобы не нарушать последовательность стилизации:

    Стили :hover могут быть переопределены другими псевдоклассами, в зависимости от того, в каком порядке они написаны в таблице стилей. Этого не произойдет если соблюдать порядок указанный выше.

    В дополнение к сказанному, нужно учитывать, что также для стилизации ссылок используется псевдокласс :focus, если вы собираетесь использовать этот псевдокласс, рекомендуется использовать его перед :hover. Таким образом соблюдается очередность.

    Тонкости & Особенности

    Доступность на сенсорных устройствах

    Иногда необходимо использовать hover, чтобы показать пользователям какой-либо элемент при наведении. Это вносит проблему доступности hover на сенсорных устройствах, т.к. пользователи не смогут получить доступ к некоторому содержимому из-за невозможности воспроизвести состояние hover на их устройстве. Поэтому необходимо убедится, что пользователь может получить доступ к этим элементам не используя состояние hover.

    Пример

    Следующий код демонстрирует изменение цвета и фона элемента при наведении на него.

    Следующий код демонстрирует изменение размера картинки используя CSS трансформацию scale, которая увеличивает картинку в 1.5 раза от оригинального размера.

    Живой пример

    Демонстрация того, как работает псевдокласс :hover на ссылках:

    Реализация простого всплывающего меню используя :hover.

    Поддержка браузерами

    Псевдокласс :hover поддерживается всеми основными браузерами: Chrome, Firefox, Safari, Opera, IE.

     

    ПОДЕЛИТЬСЯ
    Предыдущая статья:focus
    Следующая статья:last-child
    Постоянный автор на exabyte.ws. Специализируюсь на Wordpress, Javascript & jQ, REST API. Любые вопросы связанные с Web разработкой вы можете задать лично или в группе вконтакте.

    ОСТАВЬТЕ ОТВЕТ

    Пожалуйста оставьте комментарий!
    Введите ваше имя