Mouseover

bonjour,

je suis nouveau dans le monde du html et du css, etant en train de faire un petit site personnel, j'aimerai pouvoir creer une div avec a l'interieur une couleur de fond, des liens et d'autres element colorisé.

et ma recherche est basée sur un systeme qui permettrait de changer la couleur de tous ces elements a l'interieur quand la souris survol un de ces elements?

je sais c'est pas tres clair, mais je connais pas la fonction qui permet de faire ça, j'ai test hover mais ça ne prend les elements que un par un et pas tous d'un coup.

merci de votre aide

Bonjour,


Du moment que tes éléments sont dans la même div et que le survol se fait sur la div c'est bon*.

<div id="test">
      <a id="change1"></a>
      <a id="change2"></a>
      <a id="change3"></a>
      <!-- etc... -->
</div>

Le code tout simple :

#test:hover { color:red;}

changera la couleur du texte de TOUT les éléments contenus dans le bloc #test. Par contre avec ça, impossible de jouer avec le background ni de donner différente couleurs aux éléments contenus. Sinon il y a ça :

#test:hover #change1 { background-color:black; color:red;}

change la couleur de police et le fond de #change1 au survol de #test. Et par exemple :

#test:hover #change1,#test:hover #change2{ background-color:black; color:red;}

change la couleur de police et le fond de #change1 et de #change2 au survol de #test.


Par contre j'ai un peu fait Frankenstein la... j'ai utilisé cette technique sans vraiment connaitre toutes les ficelles css qu'il y a derrière. Si jamais quelqu'un a des sources sur l'utilisation d'un hover multiclass/multiid dans les css, je suis preneur !

* et si il y a une solution pour influer sur d'autres éléments hors conteneur je suis largement preneur aussi !! (Hors JS bien sur, sinon c'est trop facile )
Modifié par _laurent (22 Dec 2011 - 10:25)

Whaou parfait, vraiment un grand merci c'est pile ce dont j'avais besoin

Merci encore