[CSS] hover pas sur tous les éléments

Résolu/Fermé

zzzer Messages postés 907 Date d'inscription dimanche 25 mai 2008 Statut Membre Dernière intervention 3 décembre 2023 - 23 juil. 2008 à 09:10
mike_coucocu - 17 nov. 2008 à 22:58

Bonjour,

J'ai un tableau HTML de la forme :

<table><tr><th>Titre 1<th>Titre 2
           <tr><td>Ligne 1<td>Ligne 1
           <tr><td>Ligne 2<td>Ligne 2
           <tr><td>Ligne 3<td>Ligne 3
</table>

Et j'ai ce CSS :

tr:hover{ background-color : yellow; }

Mais j'aimerais que seuls les lignes contenant des <td> puissent être mises en surbrillance, pas la première...
Comment faire ? Rajouter un ID à la première ligne et dire au CSS de ne pas colorer celle-ci ? Si oui, comment ?

Merci :)

A voir également:

[CSS] hover pas sur tous les éléments
Photoshop elements gratuit - Télécharger - Retouche d'image
Copier coller plusieurs éléments - Guide
Taille bouton css - Forum HTML
Désolé, vous avez dépassé votre quota d'éléments partagés. ✓ - Forum Cloud
Enlever couleur lien css ✓ - Forum CSS

1 réponse

Réponse 1 / 1

macgawel Messages postés 664 Date d'inscription mercredi 7 mai 2008 Statut Membre Dernière intervention 1 novembre 2008 89
23 juil. 2008 à 09:32

Bonjour.

Il suffit d'utiliser l'héritage :

tr:hover{ background-color : yellow; }

Tu demandes de mettre en jaune les TR qui sont survolés.

Ce que tu veux, c'est mettre en jaune tous les TD des TR qui sont survolés.
Les TR qui sont survolés => tr:hover
Tous les TD des TR qui sont survolés => tr:hover td

=>

tr:hover td { background-color : yellow; }

Ceci-dit, je ne suis pas sûr qu'un hover sur un tr soit valide, et je suis à peu près sûr que ça posera problème avec certains navigateurs...

zzzer Messages postés 907 Date d'inscription dimanche 25 mai 2008 Statut Membre Dernière intervention 3 décembre 2023 181
23 juil. 2008 à 09:34

En effet, ça marche nickel (mais pas sous IE, qui ne supporte les hover que sur les <a>) !
Merci beaucoup ;)

Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 921
23 juil. 2008 à 09:57

salut,

comme tu as l'air d'aimer le code valide, je me permets…

c'est valide :

[...] La pseudo-classe :hover, qui est appliquée quand l'utilisateur désigne un élément</souligne> (au moyen d'un appareil de pointage) sans l'activer [...]
CSS ne définit pas lesquels des éléments peuvent être dans un de ces états ou comment ceux-ci entrent et sortent de ces états.

donc tous les éléments sont susceptibles d'utiliser {:hover;} mais IE n'est pas forcement blâmable :

<souligne>Les agents utilisateurs ne sont pas tenus, en raison des transitions provoquées par les pseudo-classes, de remettre en forme le document en cours d'affichage. Par exemple, une feuille de style peut spécifier que la taille de la police ('font-size') d'un lien sous l'effet de la pseudo-classe :active soit plus grande que celle d'un lien inactif, et un agent utilisateur, comme cela peut modifier la position des lettres, peut en ignorer la règle.

Spécification CSS 2.1

et est-ce que quelqu'un à tester le {:hover} sous IE7 ?

zzzer Messages postés 907 Date d'inscription dimanche 25 mai 2008 Statut Membre Dernière intervention 3 décembre 2023 181 > Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016
23 juil. 2008 à 10:03

donc tous les éléments sont susceptibles d'utiliser {:hover;} mais IE n'est pas forcement blâmable

En effet...

est-ce que quelqu'un à tester le {:hover} sous IE7 ?

Oui, il fonctionne avec les liens <a href> mais pas avec les autres éléments (quoi que, peut-être les images je crois).

mike_coucocu > zzzer Messages postés 907 Date d'inscription dimanche 25 mai 2008 Statut Membre Dernière intervention 3 décembre 2023
17 nov. 2008 à 22:58

oui ca marche sur Ie7

Discussions similaires

trait horizontal avec du css

webcame eton et 838b

Enlever le soulignement sous les liens en HTML/CSS

Virus Dr Guard sur mon PC

[CSS] Forcé retour à la ligne