Изменяем цвет подчеркивания ссылки

В этом уроке Вы узнаете, как при помощи CSS можно изменять цвет подчёркивания ссылки при наведении на неё курсора мыши, не изменяя при этом цвет самой ссылки.

Чтобы создать подобный эффект, необходимо текст ссылки вложить в контейнер, например, span, присвоив ему с помощью стилей тот же цвет, что и у самих ссылок.

Цвет линии управляется селектором a:hover.

Пример:

<html>
<head>
<style type="text/css">

/* Цвет ссылки */
a { color: blue }

/* Цвет подчеркивания у ссылки при наведении курсора */
a:hover {color: red)

/* Цвет текста в контейнере (такой же, как у ссылок) */
.line {color: blue}

</style>
</head>
<body>

<а href=index.html><span class="line">Текст ссылки.</span></a>

</body>
</html>

В данном примере создаётся ссылка синего цвета с подчёркиванием. При наведении на ссылку курсора мыши, цвет линии меняется на красный.


Опубликовано: 1.10.2010 23:54

Просмотров всего: 2226



Добавить комментарий:

Для обновления картинки кликните по ней.

Комментарии:

Нет комментариев.