:hover
Селектор CSS - це один із багатьох псевдокласів, що використовуються для стилювання елементів. :hover
використовується для вибору елементів, над якими користувач наводить курсор або мишу. Його можна використовувати на всіх елементах, а не лише на посиланнях.
При використанні для посилань стилю, :hover
часто в поєднанні з :link
, :visited
і :active
селекторами , які невідвідування стилем, відвідуєте і активними посиланнями, відповідно.
Якщо :link
і :visited
правила є у визначенні CSS, :hover
слід падати за ними. В іншому випадку стилі в :hover
правилі не застосовуватимуться до вибраного елемента.
Синтаксис:
a:hover { /* CSS declarations */ }
Селектор наведення застосовує стилі, передбачені правилом, лише коли елемент переходить у стан наведення. Зазвичай це відбувається, коли користувач наводить курсор на елемент за допомогою миші.
button { color: white; background-color: green; } button:hover { background-color: white; border: 2px solid green; color: green; }
У наведеному вище прикладі звичайним стилем кнопки є білий текст на зеленій кнопці. Коли користувач наводить мишу на кнопку, правило за допомогою :hover
селектора стає активним, а стиль кнопки змінюється.
Зверніть увагу, що це :hover
може бути проблематично на сенсорних екранах - різне впровадження апаратного забезпечення та мобільного браузера може спричинити спрацьовування псевдо-класу в деяких випадках, а в інших - не. Обов’язково ретельно протестуйте елементи :hover
в якомога більшій кількості мобільних браузерів та пристроїв.