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 à trouver la solution. Quelqu'un a-t-il une suggestion?

Merci pour votre aide, cordialement, Stephan
Voici le code:

<style type='text/css'>
span.correct:hover {
color:#00E224;
font-weight:bold;
}
.tablesd {
color: #f5f5f5;
}
.tablesd:hover {
font-weight:bold;
background: #2BC549;
}</style>

<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>

Modifié par 6l20 (10 Sep 2014 - 08:29)

Bonjour,

Je suggestionnerais que tu colorie ton tableau comme tu l'entend avec des classe "red", "blue", "border-red", etc... à placer sur les td (ex : <td class="red">) selon ton bon désir (dur de colorier tout à l'aide de sélecteur CSS propres surtout si il y a plusieurs tableau et qu'il y a une possibilité qu'ils ne soient pas exactement pareil).

Ensuite pour l'effet j'aime bien jouer avec la propriété opacity

opacity:0; sur le tableau
opacity:1; sur le tableau au hover

avec un petit transition:opacity 200ms; dans le style du tableau ça passe crème