[CSS] hover pas sur tous les éléments
Résolu
zzzer
Messages postés
906
Date d'inscription
Statut
Membre
Dernière intervention
-
mike_coucocu -
mike_coucocu -
Bonjour,
J'ai un tableau HTML de la forme :
Et j'ai ce CSS :
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 :)
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 plusieurs éléments - Guide
- Pdf elements gratuit - Télécharger - PDF
- Inspecter l'élément sur mac ✓ - Forum MacOS
- Enlever le soulignement d'un lien css ✓ - Forum Webmastering
1 réponse
Bonjour.
Il suffit d'utiliser l'héritage :
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
=>
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...
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...
Merci beaucoup ;)
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 ?
donc tous les éléments sont susceptibles d'utiliser {:hover;} mais IE n'est pas forcement blâmableEn 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).