Создание ссылки, меняющей цветпри наведении на нее указателя мыши

Опубликовал: Пятница, Январь 27, 2012 в категории CSS | Пока нет комментариев

Можно  создать привлекательный эффект изменения цвета или иных параметров ссылки при наведении на нее указателя мыши.  Его можно с успехом использовать в созданных на основе CSS панелях навигации; он применим и по отношению к ссылкам в тексте.

Решение

Для создания описанного эффекта необходимо воспользоваться дина- мическими псевдоклассами якоря :hover и :active.

Рассмотрим следующий пример. Ниже представлено типичное правило стиля, в котором описания всех псевдоклассов якоря одинаковы:

chapter02/textdecoration3.css

a:link,  a:visited,  a:hover, a:active {

text-decoration:  underline;

color: #6A5ACD;

background-color: transparent;

}

Если мы применим данное правило, ссылки будут отображаться синим цветом (#6A5ACD) с подчеркиванием, как на рис. 2.7.

Рис. 2.9. Использование двух различных стилей ссылок в одном документе

Литература: Эндрю Р. CSS: 100 и 1 совет, 3-е издание. – Пер. с англ. – СПб: Символ-Плюс, 2010. – 336 с., ил.

Похожие посты:

Комментировать

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>