Пример 1
Как стилизовать ссылку, когда вы наводите на нее мышкой:<html>
<head>
<meta charset="utf-8" />
<style>
a:hover { background-color:yellow; }
</style>
</head>
<body>
<a href="http://xhtml.co.il">Xhtml.co.il</a>
<a href="http://qwerty.uiop">qwerty.uiop</a>
<a href="http://wikipedia.org">wikipedia.org</a>
<p>Наведите мышкой на ссылки, чтобы увидеть как добавляется желтый фон:</p>
</body>
</html>
Определение и использование
Селектор :hover используется для выбора элементов при наведении указателя мыши на них.
Совет: Селектор :hover может быть использован на все элементы, а не только на ссылки.
Совет: Используйте селектор :link для стилизации ссылок на непосещенные страницы, селектор :visited для стилизации ссылок на посещенные страницы, а селектор :active для стрилизации активных ссылок.
Примечание: :hover ДОЛЖЕН находиться после :link и :visited (если они указаны) в CSS, чтобы иметь эффект!
Поддержка браузеров
Селектор :active поддерживается во всех ведущих браузерах.
Версия CSS
Селектор :active впервые представлен в: CSS 1
Пример 2
Как стилизовать ссылки, непосещенные, посещенные, активные, и когда вы наводите мышкой:
<html>
<head>
<meta charset="utf-8" />
<style>
a:link { color:green; }
a:visited { color:green; }
a:hover { color:red; }
a:active { color:yellow; }
</style>
</head>
<body>
<p>Наведите мышкой и нажмите на ссылку для того, чтобы посмотреть результат:</p>
<a href="#">Xhtml.co.il</a>
</body>
</html>
Пример 3
Как различно стилизовать ссылки:<html>
<head>
<meta charset="utf-8" />
<style>
a.ex1:hover, a.ex1:active { color:red; }
a.ex2:hover, a.ex2:active { font-size:150%; }
a.ex3:hover, a.ex3:active { background:red; }
a.ex4:hover, a.ex4:active { font-family:monospace; }
a.ex5:visited, a.ex5:link { text-decoration:none; }
a.ex5:hover, a.ex5:active { text-decoration:underline; }
</style>
</head>
<body>
<p>Наведите мышкой на ссылку, чтобы увидеть результат.</p>
<p><a class="ex1" href="#">Эта ссылка меняет цвет</a></p>
<p><a class="ex2" href="#">Эта ссылка меняет размер шрифта</a></p>
<p><a class="ex3" href="#">Эта ссылка меняет цвет фона</a></p>
<p><a class="ex4" href="#">Эта ссылка меняет семью шрифтов</a></p>
<p><a class="ex5" href="#">Эта ссылка меняет украшение текста</a></p>
</body>
</html>
Была ли эта информация полезной?
