High-Tech Santé Médecine Droit-Finances

Auto-Entrepreneur

Comment faire ?

Rechercher : dans
Par :

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

Dernière réponse le 17 nov 2008 à 22:58:41 zzzer, le 23 jui 2008 à 09:10:52 
 Signaler ce message aux modérateurs

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 :)
Configuration: Windows 2000
Firefox 3.0.1

Meilleures réponses pour « [CSS] hover pas sur tous les éléments » dans :
Popup en CSS, sans Javascript VoirVoici comment réaliser une popup d'information en pure CSS, sans Javascript. L'astuce est d'utiliser :hover de manière à utiliser des CSS différents au passage du curseur. Parmis les attributs CSS modifiés, on utilise display:none afin de...
Changer l'aspect du curseur en CSS VoirLa propriété cursor permet de changer l'aspect du curseur sur un élément d'une page web. Le client affichera automatiquement le curseur de son ordinateur qui correspond au type de curseur que vous aurez choisi. Exemples Liste des attributs...
[Gimp][Retouche photo] Supprimer des éléments d'une image VoirL'outil de clonage est utile pour supprimer des éléments d'une photo. Par exemple pour éliminer quelqu'un d'une photo, supprimer un avion dans le ciel ou les défauts d'une photo. Cet outil est présent dans Photoshop mais également dans de nombreux...
Les classes de style (CSS) VoirLes classes et les ID Les classes Il peut s'avérer intéressant d'affecter des styles différents à des mêmes balises. Pour cela les spécifications CSS ont introduit le concept de classe. La définition des classes est aussi simple que celles des...
Positionner des éléments grâce aux CSS VoirIl est possible grâce aux feuilles de style de positionner au pixel près du texte ou des images grâce aux balises et . Cela est possible avec les versions 4 de Netscape et d'Internet Explorer, cependant cette technique reste hasardeuse...
Feuilles de style - CSS VoirPrésentation des feuilles de style Le concept de feuilles de style est apparu en 1996 avec la publication par le W3C d'une nouvelle recommandation intitulée « Cascading StyleSheets » (feuilles de style en cascade), notée CSS. Le principe des...
Posez votre question Répondre

1

macgawel, le 23 jui 2008 à 09:32:46
  • +1

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... 
Si tu donnes à celui qui a faim un poisson, tu le nourris pour un jour ;
si tu lui apprends à pêcher, tu le nourris pour toujours.

   
Répondre à macgawel

2

zzzer, le 23 jui 2008 à 09:34:50

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

   
Répondre à zzzer

3

Dalida, le 23 jui 2008 à 09:57:22

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 ?
[ Mathieu ] 
Il y a surement des pandas pour ne dépendre de rien

   
Répondre à Dalida

4

zzzer, le 23 jui 2008 à 10:03:24

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).

N'oubliez pas de marquer la discussion comme résolue dès que c'est le cas ! -> En haut de la page, Statut: Résolu
Attention aussi à bien respecter la 6e règle de la charte : 
Rédiger les messages dans un langage clair sans abréviations, style télégraphique ou mode SMS

   
Répondre à zzzer

5

 mike_coucocu, le 17 nov 2008 à 22:58:41

Oui ca marche sur Ie7

   
Répondre à mike_coucocu
Posez votre question Répondre
Ils ont besoin de votre aide
Collection CommentÇaMarche.net