CSS псевдокласове: focus ,: hover: active

Ако работите с CSS, знаете, че стиловете се прилагат към селекторите, които от своя страна съдържат HTML елементи. Но не винаги. Съществува фантомна класа от класове, която се среща само в определени състояния на обект. Например, бутон или избрано поле за въвеждане е натиснато. За такива специални случаи има CSS псевдокласи: focus ,: hover,: active.

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

CSS дефинира три динамични псевдо-класа: focus,: hover,: active. Те променят външния вид на обект с определени действия на потребителя. Това означава, че за тяхното появяване се изисква необходимо условие:

.бутон: hover {
border: 1px solid # 333;
}
.button: активна {
непрозрачност: .5;
}

В този пример, докато потребителят щракне върху показалеца на мишката върху елемента с бутона за класа, записите в стила: hover не се показват.

& lt; скрипт async = "//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
& lt ;! - fb_336x280_mid - & gt;

& lt; script & gt; (adsbygoogle = window.adsbygoogle || []). push ({});

Традиционно псевдокласите се използват за обработка на връзки и бутони. Но диапазонът от възможности е много по-широк. CSS: фокусът се отнася до обекта на уеб страницата, която има фокуса на входа. Най-често това е формата на регистрация и търсене.

вход [type = "text"], вход [type = "email"] {
ширина: 300px;
семейство на шрифтовете: „Gochi Hand“, курсив;
text-align: center;
граница: 0;
контур: няма;
}
вход [type = "text"]: фокус, вход [type = "email"]: фокус {
граница: 0;
}


: hover е отговорен за елементите, върху които е разположен указателят на мишката или друго устройство. Когато потребител активира обект на страница, например кликне върху връзка, се появява псевдоклас: active

Възможности за използване на псевдокласи

Стилове: активен,: фокус,: hover - това е уникален начин за общуване с потребителя. Така ще бъдете подканени къде да въвеждате данни, маркирайте връзките, маркирайте елементите, които можете да кликнете. С помощта на успешни ефекти мотивирате посетителя да въведе имейл адрес и да се абонирате за вашия пощенски списък. Благодарение на красивата "Вход!", "Прочетете повече!" От тези, които случайно удариха страницата, ще има желание да пътуват по-нататък. Но не използвайте внимателно псевдокласовете. Ако добавите: висящи почти всички елементи, посетителите на вашия сайт могат да започнат морска болест от масивно увеличаване или мигане на обекти. Приложете фокуса на псевдо-клас на CSS, за да промените цвета на границите на полето, не повече. Най-добрият начин за правилно определяне на: hover е да направите цвета на шрифта по-тъмен при курсора на мишката. Но не докосвайте размера - съседните елементи могат да бъдат засегнати.

Свързани публикации