css changer un attribut dépendant d'une class parente.
Etienne
div.c1 {background-color:red}
div.c2 {color:blue}
.over {}
<div id='pere' class='c1'>
<div id='fils' class='c2'>hop</div>
</div>
a un moment je change la classe de l'objet pere
Sa class devient class='c1 over'
j'aimerai qu'a ce moment l'attribut color du div fils change.
Est ce possible de faire cela ?
Etienne
yamo'
Etienne a tapoté, le 24/08/2010 11:05:
> j'aimerai qu'a ce moment l'attribut color du div fils change.
>
> Est ce possible de faire cela ?
C'est ça que tu veux ?
<http://pasdenom.info/test/over.html>
--
Stéphane
http://pasdenom.info
SAM
> Salut j'ai un truc dans ce genre:
>
> div.c1 {background-color:red}
> div.c2 {color:blue}
div.c1.over div.c2 { color: red } /* pour IE */
div.c1:hover div.c2 { color: red } /* pour les autres */
div.c1 { cursor: pointer }
Plus simple (tous les divs du pere passent en rouge):
.c1 { color: blue; background: red }
.c1:hover div, c1.over div { color: red }
ou, seulement les éléments de class 'c2' :
.c1 { color: blue; background: red }
.c1:hover .c2, c1.over .c2 { color: red }
Mon préféré :
#pere { color: blue: background: red; cursor: pointer }
#pere:hover #fils, #pere.over #fils { color: red }
>
> <div id='pere' class='c1'>
> <div id='fils' class='c2'>hop</div>
> </div>
>
> a un moment je change la classe de l'objet pere
> Sa class devient class='c1 over'
>
> j'aimerai qu'a ce moment l'attribut color du div fils change.
>
> Est ce possible de faire cela ?
toutafé
Le div fils hérite de la couleur du div pere
il suffit donc au départ de fixer les couleurs pour le père
ensuite, au survol du pere, ses fils ou ceux de class 'c2' passent en red
--
Stéphane Moriaux avec/with iMac-intel
Etienne
> Salut,
>
> Etienne a tapoté, le 24/08/2010 11:05:
>> j'aimerai qu'a ce moment l'attribut color du div fils change.
>>
>> Est ce possible de faire cela ?
>
> C'est ça que tu veux ?
> <http://pasdenom.info/test/over.html>
>
non pas tout a fait.
en fait c'est pas un hover...
c'est une deuxieme class que j'ajoute sur le div pere. c'est pour faire
a peu pres la meme chose, sauf que ce n'est pas dependant de la souris
mon histoire.
Etienne
> .c1 { color: blue; background: red }
> .c1:hover .c2, c1.over .c2 { color: red }
hum je vais tester mais je crois que je n'ai pas été clair.
j'ai utilisé la class over mais je ne pensais pas du tout a hover.
j'aurai du l'appeler 'truc'
en gros je cherche le css afin que
<div id='pere' class='c1'>
<div id='fils' class='c2'>hop</div>
</div>
affiche c2 en bleu
et j'ai ajouté la class truc
<div id='pere' class='c1 truc'>
<div id='fils' class='c2'>hop</div>
</div>
affiche c2 en rouge
sachant que j'ai forcément défini une couleur pour c2 genre
div.c2 {color:blue;}
Voila
Merci.
Etienne
je viens de comprendre un truc hyper important qui est que l'ordre de
déclaration dans les CSS est hyper important.
donc mon probleme etait de changer la couleur de c2 lorsque on AJOUTE
une class a c1
div.c1 {background-color:red}
div.c1 div.c2 {color:blue}
div.truc div.c2 {color:yellow;}
avec cette declaration,
<div id='pere' class='c1'>
<div id='fils' class='c2'>hop</div>
</div>
va bien affiché mon texte en blue
et
<div id='pere' class='c1 truc'>
<div id='fils' class='c2'>hop</div>
</div>
va l'afficher en jaune car d'abors il va lire
div.c1 div.c2 {color:blue}
puis
div.truc div.c2 {color:yellow;}
donc au final ce sera jaune...
Si j'avais déclaré
div.c1 {background-color:red}
div.truc div.c2 {color:yellow;}
div.c1 div.c2 {color:blue}
et bien jamais mon hop ne deviendrai jaune...
bon ben j'ai plus qu'a tester tous les navigateurs.
Merci en tout cas, c'est en testant vos propositions que j'ai trouvé la
solution !
Etienne