Що таке CSS Hover?

Селектор :hover у CSS застосовує стилі до елемента, коли курсор наводиться на нього. Його часто використовують для створення інтерактивних ефектів або для привернення уваги до елементів під час взаємодії з ними.

Ви можете націлити елемент за допомогою селектора :hover, використовуючи його назву тегу, клас або ідентифікатор.

Наприклад:

 .button:hover { background-color: #ff0000; color: #ffffff; } 

Колір фону в попередньому прикладі стане червоним (#ff0000), коли користувач наведе курсор на елемент із класом «button», а колір тексту стане білим (#ffffff).

Поєднуючи селектор :hover з іншими елементами CSS, такими як розмір шрифту, межа або трансформація, можна створити різні ефекти наведення. Це потужний інструмент для покращення візуального відгуку та інтерактивності вашого веб-сайту чи програми.

Синтаксис:

 :hover { css declarations; } 

Розглянемо кілька прикладів, щоб зрозуміти наведення курсора за допомогою CSS:

приклад 1:

HTML код:

 Hover Me 

Код CSS:

 .hover-button { background-color: #eaeaea; color: #333333; padding: 10px 20px; border: none; cursor: pointer; transition: background-color 0.3s ease; } .hover-button:hover { background-color: #ff0000; color: #ffffff; } 

Пояснення:

У наведеному вище прикладі ми маємо кнопку з кнопкою наведення класу. Початковими комбінаціями кольорів кнопки є світло-сірий фон (#eaeaea) і темно-сірий текст (#333333). Коли миша наводиться на кнопку, колір фону змінюється на червоний (#ff0000), а колір тексту — на білий (#ffffff).

З тривалістю 0,3 секунди та функцією полегшення часу властивість переходу в класі кнопки наведення забезпечує плавний перехід для зміни кольору фону, коли миша наводиться на кнопку.

Інші елементи, наприклад посилання ( ), зображення ( ), divs ( ) або будь-який інший елемент, який ви хочете зробити інтерактивним, може використовувати подібні ефекти наведення. Ви можете створювати різноманітні ефекти наведення, які відповідають вашим потребам у дизайні, змінюючи властивості та значення в селекторі :hover.

Приклад 2: ефект масштабування зображення

HTML код:

Код CSS:

 .image-zoom { overflow: hidden; } .image-zoom img { transition: transform 0.3s ease; } .image-zoom:hover img { transform: scale(1.2); } 

Приклад 3: Ефект підкреслення посилання

HTML код:

 <a href="#">Hover Me</a> 

Код CSS:

 .underline-link { text-decoration: none; transition: border-bottom 0.3s ease; } .underline-link:hover { border-bottom: 2px solid #ff0000; } 

Особливість наведення в CSS

Ви можете покращити інтерактивність і візуальні ефекти своїх веб-сторінок за допомогою функції CSS:hover, яка пропонує ряд переваг і функцій. Нижче наведено деякі основні функції CSS при наведенні:

Інтерактивний ефект:Інтерактивні ефекти можна створювати, змінюючи зовнішній вигляд елементів при наведенні на них за допомогою селектора :hover. Коли користувачі взаємодіють із вашим вмістом, ви можете змінювати такі властивості, як колір фону, колір тексту, непрозорість, тінь прямокутника, перетворення тощо, щоб показувати їм візуальний відгук.Націлювання на кілька елементів:Ви можете вибрати кілька елементів на сторінці за допомогою селектора :hover. Це означає, що ви можете створити стандартизовані ефекти наведення курсора для різних елементів, включаючи кнопки, посилання, зображення, меню навігації та будь-який інший елемент, який ви хочете зробити інтерактивним.Підтримка переходів і анімації:Селектор :hover можна використовувати з CSS-переходами й анімаціями для отримання плавних, естетично приємних ефектів. Визначаючи властивості переходу або анімації, ви можете вказати тривалість, функцію синхронізації та інші параметри, пов’язані з анімацією, щоб регулювати, як змінюються стилі, коли на елемент наводиться курсор.Додавання додаткових селекторів:Селектор :hover можна використовувати з іншими селекторами CSS, щоб зосередитися на певних елементах або застосувати стилі відповідно до попередньо визначених критеріїв. Наприклад, ви можете створювати унікальні та індивідуальні ефекти наведення, комбінуючи селектор :hover із селекторами класів, селекторами ідентифікаторів або псевдоелементами.Підтримка доступності:Розробляючи ефекти наведення, слід враховувати доступність. Користувачі допоміжних технологій, які використовують курсор, наприклад програми зчитування з екрана, можуть не мати доступу до ефекту наведення. Через це рекомендується перевірити, чи основні функції чи вміст все ще читаються та придатні для використання без ефектів наведення.Підтримка крос-браузерності:Більшість сучасних веб-браузерів підтримують функцію CSS: hover. Це компонент специфікації CSS, сумісний з більшістю широко використовуваних браузерів, включаючи Chrome, Firefox, Safari, Edge та інші. Це забезпечує узгодженість зовнішнього вигляду та поведінки на різних платформах.