28172 sujets

CSS et mise en forme, CSS3

Bonjour =)

J'ai une liste d'elements, et lorsque je passe la souris dessus, une div enfant de l'element rollové s'affiche. Si la souris sort, alors la sous div disparait a nouveau.
quelque chose du genre :

divParent divEnfant {display:none;}
divParent:hover divEnfant {display:block;}

Comment faire pour qu'au depart, le premier element affiche la sous div, et des que la souris touche un element, on repart a la situation simple d'origine ?

En gros :

Chargement de la page puis :

divParent divEnfant:first-child {display:block;}
divParent divEnfant {display:none;}
divParent:hover divEnfant {display:block;}

puis si rollover quelque part dans la liste :

divParent divEnfant {display:none;}
divParent:hover divEnfant {display:block;}

Merci =)
bonsoir/bonjour,


éclaires nous sur ton architecture html et le CSS que tu as écris.

Les piste sont de double les selecteur de façon a jouer sur leur poid et le pseudo-selecteur :not() serait utile.

Reste que les IE en service seront réfractaire a :not().

Cdt,
GC
Hey =)

Merci pour ta reponse, ce selecteur peut etre bien pratique...
Mais je suis toujours bloque.

Exemple :


<div class="class1">contenu</div>
<div class="class1">contenu</div>
<div class="class1">contenu</div>
<div class="class1">contenu</div>



.class1 { background-color:#fff; }
.class1:hover { background-color:#000; }


Mais ce que je voudrais, c'est qu'au depart, la premiere div soit en hover par defaut. Des que la souris passe ensuite sur une des div, alors la situation "redevient normale".