[CSS] et balise <tr>

**Celeborn** · 04/07/2006, 13h56

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.

**masu** · 04/07/2006, 14h14

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code :

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

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

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

**Auteur** · 05/07/2006, 12h23

bonjour,

voici un petit script sorti de mes archives :

Code :

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

**Celeborn** · 11/06/2009, 20h52

Merci à tous.

[CSS] et balise <tr>

CSS

Discussions similaires

Partager

Partager