Teoría
Teoría

La pseudoclase :hover

Algunas pseudoclases permiten seleccionar elementos con los que está interactuando el usuario. Empezaremos con :hover.

Esta pseudoclase selecciona un elemento cuando el puntero del mouse está sobre él. Por ejemplo:

a:hover { ... }
tr:hover { ... }
.menu-item:hover { ... }

El primer selector selecciona un enlace; el segundo, una fila de tabla; y el tercero, un elemento con la clase menu-item. En todos los casos, solo lo hacen mientras el puntero está sobre el elemento.

Con esta pseudoclase podemos hacer que la interfaz sea más dinámica e interactiva: los elementos cambian de aspecto en respuesta a las acciones del usuario.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>La pseudoclase :hover</title> <link rel="stylesheet" href="course-4.css"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="cup-standings"> <h1>Clasificación individual de la Copa del Mundo</h1> <table> <tr> <th>N.º</th> <th>Biatleta</th> <th>Puntos</th> </tr> <tr> <td>1.</td> <td>Martin Fourcade <em>Francia</em> </td> <td> <strong>151</strong> </td> </tr> <tr> <td>2.</td> <td>Emil Hegle Svendsen <em>Noruega</em> </td> <td> <strong>121</strong> </td> </tr> <tr> <td>3.</td> <td>Alexis Bœuf <em>Francia</em> </td> <td> <strong>110</strong> </td> </tr> <tr> <td>4.</td> <td>Arnd Peiffer <em>Alemania</em> </td> <td> <strong>105</strong> </td> </tr> <tr> <td>5.</td> <td>Evgeny Ustyugov <em>Rusia</em> </td> <td> <strong>104</strong> </td> </tr> </table> </div> </body> </html>

CSS

table { background: rgba(255, 255, 255, 0.95); } tr:hover { } strong:hover { }

ObjetivosRealizado

Mejora la tabla de resultados para que las filas y los puntos cambien de color al pasar el puntero sobre ellos:

Agrega la propiedad background-color: #fcf8e3; a la regla de CSS con el selector tr:hover.
Agrega la propiedad color: #0088cc; a la regla con el selector strong:hover.

Pasa el puntero sobre las filas de la tabla y sobre los puntos de los biatletas para comprobar el efecto.