-
Cómo cambiar el fondo y el color del texto en el mouse encima
-
Cambio de los colores de fondo y de texto cuando un usuario pasa el ratón sobre un área en su sitio web es útil no sólo para propósitos de diseño, sino también para proporcionar una retroalimentación visual para la interacción con el usuario, lo que aumenta la usabilidad de su sitio web. Esta técnica se utiliza generalmente para los enlaces, sino que también se puede aplicar a otro texto, o incluso otros elementos de diseño Web, incluyendo mesas, separadores y listas. Mientras scripts Java puede realizar esta tarea, un método más eficiente y más simple es utilizar hojas de estilo en cascada (CSS) con el ": hover" pseudo-clase dinámica.Instrucciones
1 Escribir el código HTML para los elementos que desea que el usuario interactúe con. Tenga en cuenta que puede aplicar el efecto ratón por encima de todos los elementos de un cierto tipo, o todos los elementos de una cierta clase, o elementos específicos de un determinado ID. Asegúrese de identificar sus elementos correctamente. Ejemplos:
<a href="linked_url"> Cualquier enlace y su fondo que cambiará de color </a>
<a class="turn-red" href="linked_url"> Un enlace en la clase "turn-rojo" y su fondo que cambiará de color </a>
<a id="unique-color" href="linked_url"> Un enlace con el ID de "único color" y su fondo que cambiará de color </a>2 Escribe las reglas de estilo en la sección <head> de la página. Puede configurar cualquiera de los estilos, incluyendo el color del texto y el color de fondo mediante la designación de un estilo con la pseudo-clase ": libración". Ejemplos (elemento, clase y tipos de ID, respectivamente):
a: hover {color: blue; background-color: blanco; }
a.turn-rojo: hover {color: red; background-color: negro; }
# un único color: hover {color: púrpura; background-color: amarillo; }3 Publicar la página web y probar la configuración.
Consejos y advertencias
- Tenga en cuenta que si se utiliza el a: link y a: visitados en sus definiciones de estilo, debe colocar la una: definición de estilo de vuelo estacionario después de éstos.
- Asegúrese de probar la página web en diferentes navegadores y diferentes versiones. Los navegadores más antiguos no pueden hacer que su página Web correctamente, aunque este método funcionará para la mayoría de usuarios de la Web, incluso si se han desactivado JavaScript.
