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 :
Javascript - Modifier la hauteur (height) d'un élément HTML VoirPour modifier la hauteur d'un élément HTML en javascript, il suffit d'utiliser sa propriété de style "height". Pour cela vous pouvez y faire référence de la manière suivante : Si vous souhaitez connaître la hauteur (height) d'un bloc HTML, il...
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...
Définir une hauteur verticale et relative à un élément VoirParfois, on voudrait définir une hauteur verticale à un élément. C'est simple en utilisant des valeurs fixes (en pixels pas exemple), mais c'est plus compliqué en utilisant des hauteurs relatives (en pourcentages). Ce problème est souvent...
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...
La syntaxe des style (CSS) VoirDéfinition d'un style La définition d'un style se fait à l'aide de règles en texte simple permettant de décrire l'aspect des éléments de la page. Une règle CSS est caractérisée par deux principaux éléments : Un sélecteur de balises, permettant de...
Les unités dans les feuilles de style (CSS) VoirLes boîtes Les balises DIV définissent des blocs d'éléments. Il s'agit d'une structure privilégiée pour définir des boîtes telles que des menus ou des encarts. Le standard CSS propose un certain nombre de propriétés permettant de contrôler...
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