English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
El pseudo-clase :hover de CSS se aplica a las situaciones en las que el usuario usa un dispositivo de indicación para apuntar a un elemento (sin activarlo). Este estilo se sobrescribe por cualquier pseudo-clase relacionada con el enlace, como :link, :visited, y :active, entre otros. Para asegurar su funcionamiento, las reglas :hover deben estar después de las reglas :link y :visited, pero antes de las reglas :active, declaradas en el orden LVHA: :link - :visited - :hover - :active. El pseudo-clase :hover se puede usar en cualquier pseudo-elemento.
Manual de referencias de selectores CSS completos
El selector establece el estilo cuando el ratón se mueve sobre el enlace:
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Guía básica (oldtoolbag.com)</title>
<style>
a:active
{
background-color:lightgreen;
}
</style>
</head>
<body>
<a href="//es.oldtoolbag.com">oldtoolbag.com</a>
<a href="//www.pcjson.com" target="_top">pcjson.com</a>
<p><b>Nota:</b> Cuando el ratón se mueve sobre la conexión :hover el estilo del selector enlaza al hipervínculo.</p>
</body>
</html>Prueba y mira ‹/›Estilo especial añadido cuando el ratón se mueve sobre el enlace.
Aviso: El selector :hover se puede usar para todos los elementos, no solo para los enlaces.
Aviso: :link El selector establece el estilo de los enlaces no visitados, :visited El selector establece el estilo de los enlaces visitados.:activeEl selector establece el estilo cuando haces clic en el enlace.
Nota: ¡Para producir el efecto esperado, en la definición de CSS, :hover debe estar después de :link y :visited!
Los números en la tabla indican la primera versión del navegador que admite el atributo.
| Selector | |||||
|---|---|---|---|---|---|
| :hover | 4.0 | 7.0 | 2.0 | 3.1 | 9.6 |
Nota:Debe declararse en IE !DOCTYPE para garantizar que el selector :hover funcione eficazmente.
Tutorial de CSS: Enlaces de CSS
Tutorial de CSS: Pseudoclases de CSS
Enlaces activos, visitados, no visitados o cuando hay un ratón suspendido sobre ellos:
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Guía básica (oldtoolbag.com)</title>
<style>
a:link {color:green;}
a:visited {color:green;}
a:hover {color:red;}
a:active {color:yellow;}
</style>
</head>
<body>
<p>Coloca el ratón sobre y haz clic en este enlace: <a href="//es.oldtoolbag.com/">oldtoolbag.com</a></p>
</body>
</html>Prueba y mira ‹/›Estilos de enlace con diferentes estilos:
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Guía básica (oldtoolbag.com)</title>
<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>Coloca el ratón sobre el enlace para ver el cambio de estilo.</p>
<p><a class="ex1" href="/css/">Este enlace cambia el color</a></p>
<p><a class="ex2" href="/css/">Este enlace cambia el tamaño de la fuente</a></p>
<p><a class="ex3" href="/css/">Este enlace cambia el color de fondo</a></p>
<p><a class="ex4" href="/css/">Este enlace cambia el tipo de fuente</a></p>
<p><a class="ex5" href="/css/">Este enlace cambia el estilo de texto</a></p>
</body>
</html>Prueba y mira ‹/›