: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в якомога більшій кількості мобільних браузерів та пристроїв.