Изменение цвета ссылок
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
A:link {
color: #036 /* Цвет непосещенных ссылок */
}
A:visited {
color: #606 /* Цвет посещенных ссылок */
}
A:hover {
color: #f00 /* Цвет ссылок при наведении на них курсора мыши */
}
A:active {
color: #ff0 /* Цвет активных ссылок */
}
</style>
</head>
<body>
<a href="link1.html">Ссылка 1</a> | <a href="link2.html">Ссылка 2</a> | <a href="link3.html">Ссылка 3</a>
</body>
</html>
Результат примера показан ниже.
A.ex:link { color: #036 } A.ex:visited { color: #606 } A.ex:hover { color: #f00 } A.ex:active { color: #ff0 }
| |
В данном примере показано использование псевдоклассов совместно со ссылками. При этом имеет значение порядок следования псевдоклассов. Вначале указывается visited, а затем идет hover, в противном случае посещенные ссылки не будут изменять свой цвет при наведении на них курсора.
Псевдоклассы link и visited могут применяться только к ссылкам, а псевдоклассы active и hover также и к другим элементам документа. Это расширяет набор приемов и позволяет создавать эффект перекатывания, когда стиль элемента меняется при наведении на него курсора мыши.
Замечание
Браузер Internet Explorer позволяет использовать псевдоклассы active и hover только для ссылок.
В примере 16.3 показана таблица, строки которой меняют свой цвет при наведении на них курсора мыши. Это достигается за счет добавления псевдокласса hover к селектору TR.
