[CSS] et balise <tr>

Version imprimable

04/07/2006, 13h56
Celeborn

[CSS] et balise <tr>

Bonjour,

Je souhaiterais pouvoir réaliser en css un rollover sur un tableau de tel sorte que toute une ligne change de couleur quand on la survole. Jusqu'a présent j'ai tapé

tr:hover
{
background-color:#f00;
}

dans mon fichier style mais malheuresement ça ne fonctionne que pour la première ligne celle de titres (sous balise <th>), mais pas pour les sous balises <td>.

Si vous avez une idée merci d'avance.

le probleme c'est que la pseudo class :hover ne marche que sur une balise a sous IE.
Mais sous firefox ceci devrai fonctionner

Code:

1
2
3
4
5
6
7
8
tbody tr {
background: #fff;
color: #000;
}
tbody tr:hover {
background: #e00;
color: #000;
}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<table>
	<thead>
	<tr><th>identifiant</th><th>info1</th><th>info2</th></tr>
	</thead>
	<tbody>
    <tr>
      <th>item1</th>
      <td>value</td>
      <td>value</td>
    </tr>
    <tr>
      <th>item2</th>
      <td>value</td>
      <td>value</td>
    </tr>
		<tr>
      <th>item2</th>
      <td>value</td>
      <td>value</td>
    </tr>
		</tbody>
  </table>

04/07/2006, 14h16
<romain/>

La seudo class hover ne fonctionne sous IE qu'avec la balise a...

Donc pour faire ca ou tu utilise du javascript, ou tu utilises des liens qui pointent sur rien.... ou alors tu fais un truc qui fonctionne pas sous InternetExplorer ;)

bonjour,

voici un petit script sorti de mes archives :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 
<html>
<head>
<title></title>
<style type="text/css">
<!--
.defaut{
border-style: solid;
border-color: #AAAAAA;
border-width: 2px;
}
 
.selected{
border-style: solid;
border-color: #AAAAAA;
border-width: 2px;
background-color: #8888DD;
}
 
//-->
</style>
</head>
 
<body>
<table class="defaut">
  <tr class="defaut" onmouseover="this.className='selected'" onmouseout="this.className='defaut'">
    <td class="defaut">Ligne 1 case 0</td>
    <td class="defaut">Ligne 1 case 1</td>
    <td class="defaut">Ligne 1 case 2</td>
    <td class="defaut">Ligne 1 case 3</td>
    <td class="defaut">Ligne 1 case 4</td>
  </tr>
  <tr class="defaut" onmouseover="this.className='selected'" onmouseout="this.className='defaut'">
    <td class="defaut">Ligne 2 case 0</td>
    <td class="defaut">Ligne 2 case 1</td>
    <td class="defaut">Ligne 2 case 2</td>
    <td colspan="2" class="defaut">Ligne 2 case 3</td>
  </tr>
  <tr class="defaut">
    <td class="defaut">Ligne 3 case 0</td>
    <td class="defaut">Ligne 3 case 1</td>
    <td class="defaut">Ligne 3 case 2</td>
    <td class="defaut">Ligne 3 case 3</td>
    <td class="defaut">Ligne 3 case 4</td>
  </tr>
</table>
 
 
</body>
 
</html>

11/06/2009, 20h52
Celeborn

Merci à tous.