Поняття «Hover State»

Стан «Hover» визначає стиль елемента після наведення на нього курсора миші.

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

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

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

Hover можна використовувати не тільки для підсвічування текстових посилань.

Ще, наприклад, :hover можна використовувати для створення галереї зображень з повнорозмірними зображеннями, які відображаються тільки після наведення на мініатюру.

Псевдоклас hover може застосовуватися до будь-якого псевдоелементу і виводити на екран різні види ефектів (спливаючі підпису, підказки, плавні переходи, трансформація, ротація (від англ. «Rotate» – обертатися, змінюватися по черзі), збільшення, зміщення і т.д і т.п.) застосовуються до елементів веб-сайту після наведення на них курсора миші. Реалізовано ці ефекти можуть бути як з допомогою різних плагінів jQuery, так і на чистому CSS3.  

Браузери, такі як Firefox, Microsoft Edge, Safari, Opera або Chrome, застосовують відповідний стиль після наведення курсору (вказівника миші) на елемент.

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

Приклади стану «Hover»:

Нижче будуть приведені креативні приклади реалізації стану наведення на різних сайтах.

Hover State на мобільних пристроях

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

Висновки

Hover State це поява або поведінка кнопки або іншого елемента керування, коли вказівник миші знаходиться над ним, але елемент не був натиснутий або переміщений. Найчастіше використовується для підсвічування кнопок, коли вказівник переміщається на них, щоб показати, що вони клікабельні, або для відображення міток чи інструкцій, які вказують, що буде робити кнопка.

Hover може застосовуватися до будь-якого елементу та виводити на екран різні види ефектів, такі як спливаючі підписи, підказки, плавні переходи, трансформацію, ротацію, збільшення, зміщення і та ін.

На мобільних пристроях Hover State не відображається, так як немає можливості виконати наведення на елемент.