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 : Sélectionner tout - Visualiser dans une fenêtre à part
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 html : Sélectionner tout - Visualiser dans une fenêtre à part
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>