Bordure de tableau avec hover
Bonjour à tous,
mon problème est assez simple. J'ai un tableau de 2*2 cellule dont je souhaite modifier l'apparence lorsque l'on passe dessus avec la souris.
Au départ, il est invisible pour l'utilisateur et lorsqu'il passe la souris dessus, il apparait (en fait il s'agit de la réponse au petit problème numérique posé au-dessus (http://blog.elzeralde.fr/exemples-proportionnalites/).
On peut soit faire, d'un seul coup bien sûr:
- apparaitre en background différent les cellules (bleu en haut à gauche et en bas à droite et rouge pour les deux autres cellules)
- apparaitre les textes en police différente (bleu en haut à gauche et en bas à droite et rouge pour les deux autres cellules)
- apparaître les bordure du tableau
Je n'ai pas réussi à trouver la solution. Quelqu'un a-t-il une suggestion?
Merci pour votre aide, cordialement, Stephan
Voici le code:
Code:
1
2
3
4
5
6
7
8
9
10
11
| span.correct:hover {
color:#00E224;
font-weight:bold;
}
.tablesd {
color: #f5f5f5;
}
.tablesd:hover {
font-weight:bold;
background: #2BC549;
} |
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <p>Sur 120 enfants en vacances, 54 savent nager. Le pourcentage des enfants qui ne savent pas nager est de<br />
a) 54% <span class="correct">b) 55%</span> c) 56% d) 58%</p>
<table class="tablesd" style="text-align: left; width: 400px;" cellspacing="2" cellpadding="2">
<tbody>
<tr>
<td style="width: 200px; text-align: center;">120</td>
<td style="width: 200px; text-align: center;">100</td>
</tr>
<tr>
<td style="width: 200px; text-align: center;">120-54=66</td>
<td style="width: 200px; text-align: center;">X</td>
</tr>
<tr>
<td style="width: 400px; text-align: center;" colspan="2" rowspan="1">120*X=100*66 donc X=100*66/120=55%</td>
</tr>
</tbody>
</table> |
