28172 sujets

CSS et mise en forme, CSS3

[Résolu] Survol d'une ligne de tableau

Bonjour à tous, j'ai un petit problème avec un tableau de donnée sur lequel chaque ligne est un lien vers une page et qui change de couleur de fond et de texte au survol.

Voila ce que j'ai pour le HTML :

<table id='tablevo'>

...

<tr onMouseOver="this.className='tab_in';" onMouseOut="this.className='tab_out';" class='tab_out'>
	<td class='aligne_centre'><a href='occasion.php?id=618&amp;ordre=' class='texte_cellule'></a></td>
	<td>ALFA ROMEO</td>
	<td><a href='occasion.php?id=618&amp;ordre=' class='texte_cellule'>156 1.8 TWIN SPARK</a></td>
	<td><a href='occasion.php?id=618&amp;ordre=' class='texte_cellule'>03/2000</a></td>
	<td class='aligne_droite'><a href='occasion.php?id=618&amp;ordre=' class='texte_cellule'>136196 Km</a></td>
	<td class='aligne_droite'><a href='occasion.php?id=618&amp;ordre=' class='texte_cellule'>3900 €</a></td>
</tr>

...


et pour le CSS :

#tablevo {
	padding: 0;
	margin: 0;
	color:#333;
	border-collapse:collapse;
	width:100%;
}

#tablevo td a {
	text-decoration:none;
	display:block;
	color:#666;
}

#tablevo a:hover {
	color:#FFF;
}

#tablevo tr.tab_out {
	background-color:#FFF;
	color:#666;
}

#tablevo tr.tab_in {
	background: #999 url(../chrysler/images/fond_menu_in.jpg) repeat-x;
	color:#FFF;
}


Avec cela, le survol marche bien et transforme bien la ligne, mais seule la colonne ou se trouve le pointeur souris transforme le texte (lien) en blanc alors que j'aimerai que toute le texte de la ligne devienne blanche.

D'avance merci.
Modifié par Gonab (10 Dec 2009 - 17:54)
Bonsoir,

Effectivement seul le lien survolé est modifié, et c'est normal. L'objet qui est survolé est le lien et c'est sur le lien (balise a) que tu as mis ta règle css. Donc forcément seul l'objet survolé sera modifié.

Tu peux essayer en mettant le :hover sur la balise de ligne tr. Ca devrait marcher car celà signifie qu'au survol d'une ligne la ligne sera modifiée.

Je n'ai pas vérifié la solution que je te donne mais je pense que la balise tr accepte le modificateur :hover.

Bonne soirée,

Smiff.
Merci Smiff pour la réponse. Malheureusement, la :hover sur la balise ne m'arrange pas. Elle n'est pas reconnu sur IE et en plus elle ne résout pas le problème de changement d'état de l'ensemble des liens de la ligne.
Je n'ai d'ailleurs pas forcément été clair.
Je souhaite modifier la ligne complète (fond et texte). Pour le fond ce n'est pas problématique, c'est pour la couleur du texte le problème. En effet, chaque cellule contient une balise de lien (identique pour toute la ligne), seule le texte de la cellule survolée voit sa couleur de changée.

Utilisant jQuery sur la page, j'ai fait un petit script, pour arriver à mes fins que je vous donne. J'aurais préféré qqch bésée plus sur la feuille CSS.

	$(document).ready(function(){	
		$("tr.corps_vo")
			.mouseover(function() {
			$(this).addClass("dessus");
			$("a", this).css("color", "#FFF"); 
			})
			.mouseout(function() {
			$(this).removeClass("dessus");
			$("a", this).css("color", "#666"); 
			});
   });


Pour le css :


.dessus {
	background: #999 url(../chrysler/images/fond_menu_in.jpg) repeat-x;
	color:#FFF;
}


et pour le HTML :
...

<tr class='corps_vo'>
	<td class='aligne_centre'><a href='occasion.php?id=618&ordre=marque,modele&marque='><img src='images/photo_liste.gif' width='20' height='13' alt='' /></a></td>
	<td><a href='occasion.php?id=618&ordre=marque,modele&marque='>ALFA ROMEO</a></td>
	<td><a href='occasion.php?id=618&ordre=marque,modele&marque='>156 1.8 TWIN SPARK</a></td>
	<td><a href='occasion.php?id=618&ordre=marque,modele&marque='>03/2000</a></td>
	<td class='aligne_droite'><a href='occasion.php?id=618&ordre=marque,modele&marque='>136196 Km</a></td>
	<td class='aligne_droite'><a href='occasion.php?id=618&ordre=marque,modele&marque='>3900 €</a></td>
</tr>

...


Si d'autres idées... je prend.

Nicolas
Salut,

la pseudo-classe :hover est effectivement reconnue sur tous les éléments sauf pour IE < 7 où elle n'est reconnue que pour les liens mais tout dépend du public visé car après tout il ne s'agit que de cosmétique.

En full css cela donne quelque chose comme ça :
tr.corps_vo { 
    background: none; 
    color:#000; 
}
	
tr.corps_vo a { 
    color: blue;
}
	
tr.corps_vo:hover { 
    background: #999 url(../chrysler/images/fond_menu_in.jpg) repeat-x; 
    color:#FFF; 
}
	
tr.corps_vo:hover a { 
    color:#666; 
}
Voir pour plus d'infos les sélecteurs CSS 2.1.
Forcément, quand quelqu'un allume la lumière tout devient plus clair...

Merci beaucoup Heyoan.

Je ne sais pas pourquoi je ne me voyais pas mettre un enfant derriere :hover

Donc, je vire de suite le javascript...

Merci encore.
Sujet clos
Aller à