Changer de couleur des <tr> au passage de la souris

**sebac** · 24/06/2009, 12h09

Bonjour, j'ai un code du style

Code :

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

1
2
3
4
<tr >
<td >Titi</td>
<td >Tata</td>
</tr>

je voudrais que lors du passage de la souris, j'ai la couleur de fond de tata et titi qui change en même temps. mon css est

Code :

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

1
2
3
4
 TD.survol:hover{
	background-color: #FF6600 ;
	/*text-decoration: underline ;*/
	}

et mon html

Code :

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

1
2
3
4
<tr >
<td class=survol>Titi</td>
<td class=survol>Tata</td>
</tr>

mais ce code change juste la couleur de Titi et Tata séparément hors je voudrais que lorsque ma souris est sur tata ou titi que toutes la ligne change de couleur de fond.
Quand j'écris

Code :

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

1
2
3
4
 TR.survol:hover{
	background-color: #FF6600 ;
	/*text-decoration: underline ;*/
	}

Code :

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

1
2
3
4
<tr class=survol>
<td >Titi</td>
<td >Tata</td>
</tr>

rien ne se passe.

**radagast35** · 24/06/2009, 12h39

Salut,
Essaye ça :

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
 <style type="text/css">
	table {border-spacing:0px 10px;}
	tr:hover{background-color:red;}
</style>
</head>
 
<body>
<table>
	<tr>
		<td >Titi</td>
		<td >Tata</td>
	</tr>
</table>
</body>
</html>

**Macmillenium** · 24/06/2009, 13h59

Bonjour,

Rajoute un border-collapse:collapse; sur ton table.

Pourtant la solution a déjà été proposée.

**sebac** · 24/06/2009, 14h02

en fait je ne veux pas mélanger le css et le html mais avoir deux fichiers distinct comme actuellement ce qui fait que ce que tu m'a passé est exactement ce que j'ai déjà avec la balise tr sauf que tu as rajouté table mais ça ne change pas grand chose à mon problème, je continue de chercher de mon côté

**sebac** · 24/06/2009, 14h33

justement Macmillenium j'avais bien vu que s'était la solution mais j'ai du mal à mettre en relation le code js et le css et le html surtout que dans le code js que tu m'avais déjà passé je ne comprend pas comment tu arrives à faire un for hors d'une fonction

Code :

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

1
2
3
4
5
6
7
8
 
var MesBeauxTr = document.getElementById('ConteneurTr').getElementsByTagName('tr');
 
	for (var i=0;i<MesBeauxTr.length;i++)
	{
		MesBeauxTr[i].onmouseover = SurvolerTr;
		MesBeauxTr[i].onmouseout = QuitterTr;
	}

à moins que ça puisse se faire en js dont je suis novice

**Macmillenium** · 24/06/2009, 15h02

Code javascript :

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
 
function hoverTr() {
 
var MesBeauxTr = document.getElementById('ConteneurTr').getElementsByTagName('tr');
 
	for (var i=0;i<MesBeauxTr.length;i++)
	{
		MesBeauxTr[i].onmouseover = SurvolerTr;
		MesBeauxTr[i].onmouseout = QuitterTr;
	}
 
	function SurvolerTr() {
		if (document.all) {
			this.style.cssText ='background-color:#900;'
		}
		else {
			this.setAttribute('style', 'background-color:#900')
		}
	}
 
	function QuitterTr() {
		if (document.all) {
			this.style.cssText ='background-color:<?php echo $BGCOLOR ?>;'
		}
		else {
			this.setAttribute('style', 'background-color:<?php echo $BGCOLOR ?>')
		}
	}
 }

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13

...
<body onload="hoverTr()">
...


<table id="ConteneurTr">
  <tr>
      <td>Titi</td>
      <td>Tata</td>
  </tr>
<table>

C'est tout

**radagast35** · 24/06/2009, 15h06

CSS:

Code :

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

1
2
3
table {border-spacing:0px 10px;}
tr.survolRed:hover{background-color:red;}
tr.survolGreen:hover{background-color:green;}

Le border collapse n'est pas obligatoire car j'ai mis le border-spacing (ici juste horizontal) à 0;

HTML:

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
 
<table>
  <tr class="survolRed">
	<td >Titi</td>
	<td >Tata</td>
  </tr>
  <tr class="survolGreen">
	<td >toto</td>
	<td >tete</td>
  </tr>
  <tr class="survolRed">
	<td >tutu</td>
	<td >tyty</td>
  </tr>
</table>

De cette maniere, au survol d'un element, toute la ligne est changée.
Est ce bien ce que tu veux?

**Macmillenium** · 24/06/2009, 15h14

Envoyé par radagast35

Le border collapse n'est pas obligatoire car j'ai mis le border-spacing (ici juste horizontal) à 0;

border-spacing ne fonctionne pas sous IE7 et versions inférieures, d'où l'intérêt d'utiliser border-collapse + padding sur les <td>.

Il ne faut pas oublier de préciser que :hover ne fonctionne que sur les éléments <a> sous IE6 et versions inférieures => passage obligatoire par le JS dans ce cas.

Changer de couleur des <tr> au passage de la souris

CSS

Vue hybride

Discussions similaires

Partager

Partager