28173 sujets

CSS et mise en forme, CSS3

[Résolu] Over sur un <tr> en css?

Bonsoir tout le monde,

je viens vous voir, car j'aimerai faire un over sur toute une ligne d'un tableau en css, et je vois pas comment faire. J'ai essayé de mettre une class sur le <tr> mais ca marche pas, et si je le met sur tous les <td>, ca le fait que pour la cellule et non pour toute la ligne. Donc si quelqu'un pouvait m'aider, ca serait sympa, et si possible compatible IE/FF Smiley smile

Merci d'avance
Modifié par Monico (05 Jan 2007 - 17:22)
Bah il faudrait que tu poste un code d'exemple sinon je ne vois pas trop le problème. A priori c'est plutôt simple, par exemple comme ça :


tr:hover{
background:#CCC;
}


par contre ça ne fonctionnera pas sous IE6, si ça doit fonctionner sur ce navigateur il faut alors passer par du javascript pour reproduire cet effet.
Hermann a écrit :
Pour que ça focntionne sur IE 6, tu dois ajouter
<tr onMouseOver="this.style.background='#CCC';">.
Attention, on écrit "onmouseover" en minuscules. Et il faudra aussi un gestionnaire d'événements "onmouseout" pour remettre la couleur d'origine. Si la quantité de lignes est importante ou variable, il est largement préférable (car plus propre et plus léger) d'ajouter ces gestionnaires d'événements dans le code JavaScript. De plus, ça permettra d'utiliser les commentaires conditionnels pour n'inclure le script que pour IE < 7.
Modifié par Eldebaran (04 Jan 2007 - 11:44)
Eldebaran a écrit :
Attention, on écrit "onmouseover" en minuscules. Et il faudra aussi un gestionnaire d'événements "onmouseout" pour remettre la couleur d'origine. Si la quantité de lignes est importante ou variable, il est largement préférable (car plus propre et plus léger) d'ajouter ces gestionnaires d'événements dans le code JavaScript. De plus, ça permettra d'utiliser les commentaires conditionnels pour n'inclure le script que pour IE < 7.


Ok oui en effet j'oublie le mouseout. Evidemment ma solution n'est
pas idéale en therme de légèreté de code et d'efficacité...
Faut-il écrire les gestionnaire d'événements en minuscule pour qu'il
soient compatible avec une page XHTML traité en tant qu'application
xml?
Modifié par Hermann (04 Jan 2007 - 11:55)
Hermann a écrit :
Faut-il écrire les gestionnaire d'événements en minuscule pour qu'il soient compatible avec une page XHTML traité en tant qu'application xml?
Non, juste pour qu'ils soient compatibles avec les doctypes XHTML. Smiley smile
Eldebaran a écrit :
Non, juste pour qu'ils soient compatibles avec les doctypes XHTML. Smiley smile


Ok merci pour l'info. Smiley cligne
Merci de l'aide, mais c'est bien ce que j'avais fait, et ca ne marche pas ni sous FF avec la class, ni sous IE avec le code JS.

voila un exemple

http://pescup.free.fr

dans le cadre "dernières news" c'est un tableau avec le code, et le css est celui ci :

#index_news tr:hover {
	background:#fadcdc;
	width:100%;
	}


donc si vous pouviez m'aidez, car je comprend vraiment pas pourquoi. Il y a peut etre un conflit quelque part, mais je vois pas !

Merci
Tout simplement parce que tes cellules ont également une couleur de fond, et une cellule s'affiche au premier plan vis-à-vis de la ligne tr qui la contient.

Plutôt que changer la couleur de fond du tr au survol, il faut donc que tu change la couleur de fond des cellules du tr survolé, ce qui donne un sélecteur comme ceci :


#index_news tr:hover td{
background:#fadcdc;
}


voilà, ça devrait marcher Smiley smile
Sujet clos
Aller à