Tecnología

Inicio

Cómo cambiar el color de la fila en un ratón por encima

February 25

El evento "Onmouseover" en los elementos JavaScript efectos web cambiándolos cuando el usuario coloca el cursor del ratón sobre él. Este evento, combinado con el evento "onmouseout", crea un efecto de resaltado que se puede utilizar para cambiar el estilo de texto, imágenes e incluso celdas de la tabla. Para cambiar el color de una fila de la tabla, tendrá que crear una clase para la etiqueta "<tr>", que efectuará únicamente la fila de la tabla y no las columnas.

Instrucciones

1 Abra un editor de HTML y haga clic en "Archivo" y seleccionar "Nuevo".

2 Haga clic para colocar el cursor del ratón entre el "<head>" y "</ head>" etiquetas y pulse "ENTER" para crear una nueva línea.

3 Tipo "< 'text / css' style type =>" y pulse "ENTER". Tipo ".Normal {background-color: # FFFFFF}" para crear una clase con un fondo blanco. Presione ENTRAR." Tipo "DESTACAR {background-color: #DADADA}" (sustituir "#DADADA" con el valor hexadecimal de color de su elección) para crear una clase que se resalta con un color diferente. Presione ENTRAR."

4 Tipo "</ style>" para cerrar la etiqueta de estilo.

5 Haga clic para colocar el cursor del ratón entre el "<body>" y "</ body>" etiquetas en las que desea colocar la tabla. Pulse la tecla "ENTER" para crear una nueva línea.

6 Tipo "<table>" y pulse "ENTER". Esta es la etiqueta de la tabla de apertura.

7 Tipo "<tr onmouseover =" this.className = 'destacado' "onmouseout =" this.className = "class =" "normal" normal ">" para crear una fila de la tabla con los comandos "y" onmouseover "onmouseout" que se cambiar el color de fila.

8 Tipo "<td> </ td>" para crear una celda de la fila, a continuación, pulse "ENTER". Repita este paso para crear más células en la fila de la tabla.

9 Tipo "</ tr>" para cerrar la fila de la tabla.

10 Repita los pasos 7, 8 y 9 para crear más filas de la tabla, según sea necesario. Tipo "</ table>" para cerrar las etiquetas de tabla.

11 Haga clic en el menú "Archivo" y tipo "Guardar". Haga doble clic en el documento HTML para abrirlo en el navegador web.

12 Coloque el cursor del ratón sobre la fila de la tabla para cambiar el color de la fila de la tabla con el color definido en el paso 3 como la clase "punto culminante". Mover el cursor del ratón fuera de la fila de la tabla para cambiar de nuevo a la clase color original "normal".