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

Опубликованно 05.10.2018 08:10

Если вы работали с CSS, то вы знаете, что стили применяются к избирателей, что, в свою очередь, являются элементами HTML. Но не всегда. Есть призрак категория классов, которая возникает только при определенных условиях объект. Например, кнопка нажата или выбора в поле ввода. Для этих особых случаев, есть псевдо-класс CSS :focus, :hover, a :active.

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

CSS определяет три динамические псевдоклассы, focus, :hover, a :active. Изменяют внешний вид объекта при определенных действиях пользователя. Это означает, что для их появления нужно условие:

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

В этом примере, до тех пор, пока пользователь не наведет курсор мыши на элемент с классом button, зарегистрирована a :hover стили не появится.

Традиционно псевдоклассы используют для обработки ссылок и кнопок. Но диапазон возможностей гораздо шире. В CSS :focus ссылается на объект веб-страницы, к которой принадлежит фокус. Чаще всего это поля регистрационных форм и поиска.

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

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

Возможность применения псевдоклассы

Стили для :active, a :focus, :hover - это своего рода способ общения с пользователем. Таким образом, вы вы можете куда вводить данные, подчеркивает ссылки, выберите элементы, на которые можно нажать. С помощью успешных эффектов удается мотивировать посетителя, чтобы ввести адрес электронной почты и подписаться на вашу рассылку. Спасибо, красивые кнопки «Войти!», «Продолжайте читать!» тех, кто случайно попал на страницу, желание путешествовать по сайту дальше.

Но не использовать псевдоклассы тоже. Если вы добавите :почти все элементы, посетителей на ваш веб-сайт может начаться морская болезнь от массы растущих или мигающие огни. Использовать CSS псевдо-класс, фокус, чтобы изменить цвет рамки полей, не более. Лучший способ для того, чтобы грамотно назначить :hover — это сделать цвет шрифта темнее, когда вы наведите курсор мыши. Но не трогайте размер - от этого могут пострадать соседние элементы. Автор: Искать Ася 1 Октября 2018 года

Категория: Строительство