Salut,
La même question posée 2 fois en 7 jours. C'est un peu un mélange entre CSS et Javascript. Il faudrait peut-être la mettre dans les 2 FAQ.
Q : Comment surligner toute une ligne de tableau en la survolant
R : En utilisant 2 classes différentes et en basculant d'une classe à l'autre avec un peu de Javascript puisque IE ne reconnait le pseudo-code :hover QUE sur les balises <a>
1
2
3
4
5
6
7
8
9
10
| <table border="1">
<tr class="trnormal" onMouseOver="this.className='trhover';" onMouseOut="this.className='trnormal';">
<td>aaaaaaa</td>
<td>bbbbbbb</td>
</tr>
<tr class="trnormal" onMouseOver="this.className='trhover';" onMouseOut="this.className='trnormal';">
<td>ccccccc</td>
<td>ddddddd</td>
</tr>
</table> |
Avec le code CSS :
1
2
3
4
5
6
7
8
| .trnormal {
background-color: #fff;
color: #000;
}
.trhover {
background-color: #000;
color: #fff;
} |
De plus, si on veut que la ligne réagisse comme un lien, il suffit d'ajouter
onclick="location.href='page1.html';"
dans les balises <tr> et de modifier le CSS pour ajouter la petite main :
1
2
3
4
5
6
7
8
9
10
| .trnormal {
background-color: #fff;
color: #000;
cursor: default;
}
.trhover {
background-color: #000;
color: #fff;
cursor: pointer;
} |
Testé sous IE6-SP1 et FF 1.0.4, sous W2K Pro - SP4
Contribuez à la FAQ HTML/DHTML/XHTML
pour votre future participation
Envoyé par Bisûnûrs
Partager