probléme de hover

**leto02** · 30/05/2007, 15h59

Bonjour,

Afin de créer un systéme de developper/réduire j'ai créer une série de liste du modéle suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
<ul>
	<li class="liste ouvrir">Plus de détails :</li>
	<li class="liste objet">plan d action co,</li>
	<li class="liste objet">coaching.</li>
	<li class="liste fermer">moins de détails :</li>
</ul>

chaque liste commence et se finis par un élément ouvrir et fermer, a terme ses deux éléments me servent de boutons...
j'ai donc créer un style rollover gràce au css avec une images qui change sur chacun de mes "boutons" :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
<style type="text/css">
	body { behavior : url(../../Scripts/csshover.htc) ; }
	li{ list-style : none ; }
	li.objet{ padding-left : 25px ; background : url(../../images/puce.gif) left 0.1em no-repeat ;}
	li.ouvrir{ padding-left  : 25px ; font-size : 0.8em ;  background : url(../../images/dev1.gif) left 5px no-repeat ;}
	li.ouvrir:hover { font-weight : bold ;  background : url(../../images/dev2.gif) left 5px no-repeat ;}
	li.fermer{ padding-left : 25px; font-size : 0.8em ;  background : url(../../images/red1.gif) left 5px no-repeat ;}
	li.fermer:hover { font-weight : bold ;  background : url(../../images/red2.gif) left 5px no-repeat ;}
</style>

Mon probléme, est que quel que soit l'élement que je survol (fermer ou ouvert), l'image qui apparait est toujour celle de fermer

...

J'éspére que j'ai été clair, et qu'une solution existe.

**Nesmontou** · 30/05/2007, 16h36

Salut, il faut fermer tes balises <li>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

</li>

Bon développement

**leto02** · 30/05/2007, 16h51

Alors j'ai fermé mes balises <li></li> (j'ai éditer mon code ci-dessus), mais ça ne change rien a mon probléme...

sinon est-ce indispensable de fermé les balises <li>, juste mieux ou égale ?

**1407.** · 30/05/2007, 22h54

deja, tu pourrais inscrire le code de la facon correcte...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
<ul>
	<li class="ouvrir">Plus de détails :</li>
	<li class="objet">plan d action co,</li>
	<li class="objet">coaching.</li>
	<li class="fermer">moins de détails :</li>
</ul>

et t'as pas besoin de ca dans ton CSS puisque tu donne une classe a chaque partie de ta liste de toutes facons, tu peux donc supprimer

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

li{ list-style : none ; }

**leto02** · 31/05/2007, 15h25

L'exemple que je donne est une simplifcation d'une page plus complexe, j'ai essayé de réduire le code au maximum histoire de ne garder que se qui concerne le probléme, a terme j'aurais besoins d'une classe du type "<li class="liste fermer">"...

Néanmoins, j'ai tester en surprimant liste de ma classe mais le probléme demeure.

je met un lien vers contenant mon petit essai http://www.groupe-arsenal.fr/test.zip

**Candygirl** · 31/05/2007, 15h35

Envoyé par leto02

Néanmoins, j'ai tester en surprimant liste de ma classe mais le probléme demeure.

je met un lien vers contenant mon petit essai http://www.groupe-arsenal.fr/test.zip

Euh, perso je ne constate pas le problème énoncé dans le zip qu tu donnes en lien ?! J'ai bien un over avec le +.

Enfin tu aurais du préciser que le problème n'apparaît que sur IE

Ajouter un doctype valide tout en haut de ta page devrait aider IE à interpréter ton code et tes css de manière standard.

D'autre part tu as un

Code :

Sélectionner tout - Visualiser dans une fenêtre à part