Псевдокласс hover

Всем привет. Итак, что же такое псевдокласс hover в CSS. Это, прежде всего, набор свойств, применяемых к элементу. Но видимость всех этих свойств появляется лишь тогда, когда на определенный объект наводится курсор мыши. Для примера можно посмотреть на ссылки. Обычно они все как-то меняются при наведении на них курсора. Я недавно писал про красивый эффект для ссылок, так вот, там как раз применяется псевдокласс hover. Практически ко всем фрагментам можно применить псевдокласс hover и это безусловно будет выделять его из общего потока на странице. Если у вас блог или магазин, примените на страницах псевдокласс hover и сайт тут же оживет.

Можно так же сделать всплывающие подсказки на CSS, с использованием того же псевдокласса hover. В своих материалах на тему CSS, много где упоминается про этот псевдокласс, но давайте все же разберем небольшой и самый простой пример. За пример возьмем тег «а». Пишем обычный линк без применения к нему каких-либо свойств. Браузер будет использовать  свои собственные стили.

<a href="#">ССЫЛКА</a>

И в CSS пишем те свойства, которые мы хотим видеть у этого элемента при наведении курсора. Давайте сделаем ее зеленой и уберем подчеркивание.

1
2
3
4

a:hover{
 color:green;
 text-decoration:none;
}

Демо

Это самый простой пример того, что можно сделать с псевдоклассом hover. На моем блоге задействовано множество элементов, но я не хочу вам их перечислять потому, как возможно когда вы будете это читать, тех эффектов уже не будет. На самом деле перечислять все эффекты не имеет смысла, их огромное множество и ограничить в этом может только ваша фантазия. Но увлекаться сильно не стоит. Как говорится -все хорошо в меру. Если что-то было непонятно, то напишите об этом в комментариях.