Как изменить вид ссылки при наведении на нее курсора мыши?

🕛 20.01.2009, 20:03

Псевдокласс hover, который добавляется к селектору A, как раз определяет стиль ссылки, когда на нее наводится курсор мыши. В таблице стилей вначале указывается селектор A, потом через двоеточие hover (пример 1).

Пример 1. Изменение вида ссылки

HTML 4.01CSS 2.1IE 6IE 7Op 9.5Sa 3.1Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <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.

Пример 2. Изменение цвета фона ссылки

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Фон под ссылками</title> <style type="text/css"> A { color: #000080; /* Цвет обычной ссылки */ padding: 2px; /* Поля вокруг текста */ } A:visited { color: #800080; /* Цвет посещенной ссылки */ } A:hover { text-decoration: none; /* Убираем подчеркивание */ color: #fff; /* Цвет ссылки при наведении на нее курсора мыши */ background: #e24486; /* Цвет фона */ } </style> </head> <body> <p><a href="rome.html">Audaces fortuna juvat</a> - счастье покровительствует смелым.</p> </body>
</html>