:hover
:hover es una pseudo-clase que reacciona ante la acción de un usuario, cuando este pasa el cursor del mouse sobre el elemento especificado.
a:hover {
color: blue;
text-decoration: underline;
}
Un recurso útil para dar estilos en enlaces, menús desplegables, botones e incluso para lograr acciones más complejas con el uso de selectores basados en relaciones.
Advertencia
Aunque la pseudo-clase :hover es un excelente recurso para hacer un sitio web más fluido y atractivo, siempre hay que tomar en cuenta que para pantallas táctiles suele haber problemas. Esto debido a que no existe un cursor como tal, sino más bien gestos en los dispositivos. Como desarrollador hay que considerar este problema y hacerlo accesible en los casos que sea necesario.
Uso
<a href="#" class="button">Click!</a>
.button {
background: black;
color: white;
text-transform: uppercase;
padding: 0.5rem 1rem;
transition: 0.3s;
}
.button:hover {
transform: scale(1.1);
}
