Псевдоклассы в CSS, псевдостиль Hover

Поговорим о псевдоклассах в CSS. Псевдоклассы позволяют внести в web-страницы некоторые элементы интерактивного взаимодействий с пользователем, к примеру, изменение стиля элемента при наведении на него курсора мыши. Псевдоклассы могут взять на себя часть функций JavaScript, но тут имеется и ложка дегтя — некоторые псевдоклассы не поддерживаются различными версиями браузеров.

Псевдоклассы в CSS, псевдостиль Hover

Но использовать псевдоклассы в CSS в своих web-проектах можно и нужно, поэтому в сегодняшнем уроке мы постараемся подробно рассказать о основных псевдоклассах и о том, как их следует применять.

Итак, псевдоклассы в CSS – это встроенные в CSS классы, которые позволяют менять стилевое оформление элемента, в зависимости от действий пользователя.

Вернемся к примеру выше о том, как изменить стилевое оформление элемента при наведении на него курсора мыши при помощи CSS. Делается такой трюк очень просто- нужно к этому элементу вместе с основным блоком атрибутов и свойств добавить еще один блок с псевдоклассом :hover. Рассмотрим простой пример, когда цвет нужного нам элемента будет меняться при наведении на него курсора мыши. Для начала создадим css-класс, делающий цвет фона синим:

.bluefon { background-color:blue; }

И добавим созданный стиль к HTML-элементу:

<div class=”bluefon”>Фон синего цвета</div>

Теперь создадим псевдостиль для уже созданного стиля, чтобы цвет div-а менялся при наведении курсора мыши. Добавим в наш css-файл следующую конструкцию:

.bluefon:hover { background-color:red; }

Таким образом, мы с помощью псевдостиля :hover сделали изменение цвета элемента при наведении на него курсора. Обратите внимание на синтаксическую особенность создания псевдостилей – сначала мы создаем обыкновенный стиль для селектора, в качестве которого может выступать тег, класс или идентификатор. Затем мы снова создаем этот же селектор с таким же названием, но уже с добавлением через знак двоеточия названия псевдостиля. В общем виде синтаксис псевдостиля выглядит так:

Селектор:псевдостиль {атрибут:свойство;}

Все созданные псевдостили нужно добавлять к уже созданным обычным стилям, с одинаковыми названиями.

Рассмотренный нами выше псевдостиль Hover, пожалуй, является самым популярным псевдостилем. С помощью него можно создавать самые различные интересные эффекты, и придать сайтам элементы интерактивного взаимодействия с пользователем без использования скриптов.