Псевдокласи CSS:focus, :hover і:active

Псевдокласи CSS:focus, :hover і:active

Якщо ви працювали з CSS, то знаєте, що стилі застосовуються до селекторів, які, в свою чергу, є HTML-елементами. Але не завжди. Існує фантомна категорія класів, яка виникає тільки в певних станах об 'єкта. Наприклад, натиснута кнопка або вибране поле вводу. Для таких особливих випадків існують псевдокласи CSS:focus, :hover, :active.

Динамічні псевдокласи

CSS визначає три динамічні псевдокласи,:focus, :hover, :active. Вони змінюють вигляд об 'єкта при певних діях користувача. Це означає що для їх появи потрібна обов 'язкова умова:


.button:hover{
border: 1px solid #333;
}
.button:active{
opacity: .5;
}

У цьому прикладі, поки користувач не наведе курсор мишки на елемент з класом button, записані в:hover стилі ніяк не проявляться.

Традиційно псевдокласи використовують для обробки посилань і кнопок. Але діапазон можливостей набагато ширший. CSS:focus посилається на об 'єкт веб-сторінки, якому належить фокус введення. Найчастіше це поля форм реєстрації та пошуку.

input[type=""text""], input[type=""email""]{
  width: 300px;
  font-family: 'Gochi Hand', cursive;
  text-align: center;
  border: 0;
  outline: none;
}
input[type=""text""]:focus, input[type=""email""]:focus{
   border: 0;
  }

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

Можливості застосування псевдокласів

Стилі для:active, :focus, :hover - це своєрідний спосіб спілкування з користувачем. Так ви підказуєте куди вводити дані, підкреслює посилання, виділяєте елементи за якими можна натиснути. За допомогою вдалих ефектів ви мотивуєте відвідувача ввести адресу електронної пошти і підписатися на вашу розсилку. Завдяки красивим кнопкам "Увійти!", "Читати далі!" у тих, хто випадково потрапив на сторінку, виникне бажання подорожувати сайтом далі.


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