Если вы работали с CSS, то знаете, что стили применяются к селекторам, которые, в свою очередь, являются HTML-элементами. Но не всегда. Существует фантомная категория классов, которая возникает только в определенных состояниях объекта. Например, нажатая кнопка или выбранное поле ввода. Для таких особых случаев существуют псевдоклассы CSS :focus, :hover, :active.
Динамические псевдоклассы
CSS определяет три динамических псевдокласса, :focus, :hover, :active. Они меняют внешний вид объекта при определенных действиях пользователя. Это означает что для их появления нужно обязательное условие:
Вам будет интересно:Mp3tag: как пользоваться программой
.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 — это сделать цвет шрифта темнее при наведении мышки. Но не трогайте размер - от этого могут пострадать соседние элементы.