Читайте также:
|
Виды ссылок
Любая ссылка на веб-странице может находиться в одном из следующих состояний.
Непосещенная ссылка. Такое состояние характеризуется для ссылок, которые еще не открывали. По умолчанию непосещенные текстовые ссылки изображаются синего цвета и с подчеркиванием.
Активная ссылка. Ссылка помечается как активная в момент ее открытия. Поскольку время между нажатием на ссылку и началом загрузки нового документа достаточно мало, подобное состояние ссылки весьма кратковременно. Активной ссылка становится также, при ее выделении с помощью клавиатуры. Цвет такой ссылки по умолчанию красный.
Посещенная ссылка. Как только пользователь открывает документ, на который указывает ссылка, она помечается как посещенная и меняет свой цвет на фиолетовый, установленный по умолчанию.
Как изменить вид ссылки при наведении на нее курсора мыши?
Псевдокласс hover, который добавляется к селектору A, как раз определяет стиль ссылки, когда на нее наводится курсор мыши. В таблице стилей вначале указывается селектор A, потом через двоеточие hover (пример 1).
Пример 1. Изменение вида ссылки
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Цвет ссылок </title>
<style type="text/css" >
A {
color: #008000; /* Цвет обычной ссылки */
text-decoration: none; /* Убираем подчеркивание у ссылок */
}
A:visited {
color: #800080; /* Цвет посещенной ссылки */
}
A:hover {
color: #800000; /* Цвет ссылки при наведении на нее курсора мыши */
text-decoration: underline; /* Добавляем подчеркивание */
}
</style>
</head>
<body>
<p><a href="rome.html" > Cras ingens iterabimus aequor </a> -
завтра снова мы выйдем в огромное море. </p>
</body>
</html>
В данном примере ссылка становится подчеркнутой и меняет свой цвет, когда на нее наводится указатель (рис. 1). Заметьте, что псевдокласс hover в таблице стилей идет после visited. Это имеет значение, иначе посещенные ссылки в данном случае не будут изменять свой цвет.
Рис. 1. Вид ссылки при наведении на нее курсора мыши
Аналогично можно изменить и цвет фона под ссылкой при ее наведении, добавив свойство background к селектору A:hover, как показано в примере 2.
Дата добавления: 2015-07-10; просмотров: 143 | Нарушение авторских прав
| <== предыдущая страница | | | следующая страница ==> |
| ГИДРОГРАФИЯ | | | Введение |