Clase pseudo :hover de CSS
La pseudo-clase :hover selecciona y estiliza el elemento sobre el que se pasa el cursor. Se activa cuando el usuario mueve el puntero del ratón sobre él. Pasar el cursor no requiere activar el dispositivo de puntero.
La pseudo-clase :active puede coexistir con :hover. Cuando ambas se aplican, :active tiene prioridad debido al orden de la cascada, en lugar de sobrescribir estrictamente :hover.
INFO
Muchos dispositivos táctiles no admiten :hover porque carecen de un estado de paso de cursor persistente; tocar un elemento normalmente activa :active o :focus en su lugar.
Para una mejor accesibilidad, se recomienda aplicar los mismos estilos a :focus junto con :hover. Para garantizar que los estilos solo se apliquen en dispositivos que admiten el paso de cursor, envuelve tus reglas en @media (hover: hover) { ... }.
Versión
Sintaxis
Sintaxis de CSS :hover
:hover {
css declarations;
}Ejemplo de la pseudo-clase :hover:
Ejemplo de la clase pseudo CSS :hover
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
a:hover {
background-color: #8ebf42;
color: #666;
}
</style>
</head>
<body>
<h2>:hover selector example</h2>
<a href="https://www.w3docs.com/">W3docs.com</a>
</body>
</html>Pasa el cursor sobre los enlaces para ver cómo cambia el color.
Ejemplo de la pseudo-clase :hover con la <a> etiqueta:
Ejemplo de código CSS :hover para enlaces
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
a {
color: #1c87c9;
}
a:hover {
background-color: #555;
color: #eee;
}
</style>
</head>
<body>
<h2>:hover selector example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and <a href="#">typesetting</a> industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into <a href="#">electronic</a> typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like <a href="#">Aldus PageMaker</a> including versions of Lorem Ipsum.</p>
</body>
</html>Ejemplo de la pseudo-clase :hover con la <div> etiqueta:
Ejemplo de código CSS :hover para div
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
padding: 30px;
background-color: #8ebf42;
color: #eee;
}
div:hover {
background-color: #444;
color: #fff;
}
</style>
</head>
<body>
<h2>:hover selector example</h2>
<div>
Lorem ipsum is simply dummy text...
</div>
</body>
</html>Práctica
¿Cuál es el propósito del selector :hover en CSS?