Explicación del selector de desplazamiento de CSS (con ejemplo)

El :hoverselector de CSS es una de las muchas pseudoclases que se utilizan para diseñar elementos. :hoverse utiliza para seleccionar elementos sobre los que los usuarios colocan el cursor o el mouse. Se puede utilizar en todos los elementos, no solo en los enlaces.

Cuando se utiliza para enlaces de estilo, :hovera menudo se combina con los :link, :visitedy :activeselectores que no visitados estilo, visitados y los vínculos activos, respectivamente.

Si las reglas :linky :visitedestán en la definición de CSS, :hoverdeberían seguirlas. De lo contrario, los estilos de la :hoverregla no se aplicarán al elemento seleccionado.

Sintaxis:

a:hover { /* CSS declarations */ }

El selector de desplazamiento solo aplica los estilos proporcionados en la regla cuando un elemento entra en estado de desplazamiento. Esto suele ocurrir cuando un usuario pasa el mouse sobre el elemento.

button { color: white; background-color: green; } button:hover { background-color: white; border: 2px solid green; color: green; }

En el ejemplo anterior, el estilo normal del botón es texto blanco sobre un botón verde. Cuando un usuario pasa el mouse sobre el botón con el mouse, la regla con el :hoverselector se activará y el estilo del botón cambiará.

Tenga en cuenta que :hoverpuede ser problemático en las pantallas táctiles: diferentes implementaciones de hardware y navegador móvil pueden hacer que la pseudoclase se active en algunos casos y no en otros. Asegúrese de probar a fondo los elementos con :hovertantos navegadores y dispositivos móviles diferentes como sea posible.