Teoría
Teoría

Efectos dinámicos con :hover

¿Te has preguntado cómo se crean los menús desplegables con CSS?

Gran parte de los efectos dinámicos de CSS se basa en unas pocas pseudoclases, y la principal es, por supuesto, :hover. El secreto está en combinar selectores de descendientes y pseudoclases. Mira este ejemplo:

li.top ul.submenu {
  display: none;
}

li.top:hover ul.submenu {
  display: block;
}

La primera regla oculta la lista del submenú. La segunda indica: «Si el puntero está sobre el elemento del menú que contiene el submenú, muestra ese submenú». Así de sencillo.

El principio general es este: el elemento contenedor reacciona al puntero y cambian las propiedades de sus descendientes. Todo funciona con selectores de la forma selector1:hover selector2.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Efectos dinámicos con :hover</title> <style> em { display: none; } </style> <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

em { display: none; }

ObjetivosRealizado

Ahora el país está oculto por defecto en la tabla de resultados. Haz que, al pasar el puntero sobre una fila:

Aparezca el país: usa la propiedad display: inline;.
Los puntos cambien de color: usa la propiedad color: #0088cc;.

Pasa el puntero sobre las filas de la tabla para comprobar los selectores.