changer la couleur d'un puce au survol

[seb4701]

Salut.

Une petite question, qui me chipote depuis un petit moment :

Comment changer la couleur d'un puce quand on survol un lien quelle contient ?

C'est juste un petit problème de cosmétique pour le site, pas bien important.

Voila mon Code HTML

<ul>
  <li><a class="link">Hello</a></li>
  <li><a class="link">World</a></li>
</ul>

Avec CSS et a:hover, pas de problème pour changer la couleur du lien (en fait je fait même un peu plus que ça, le lien contient 2 <span> de couleurs différentes, au survol je met deux autres couleurs ). Mais comment changer la couleur de la puce ?

En écrivant ça :

<ul>
  <a class="link"><li>Hello</li></a>
  <a class="link"><li>World</li></a>
</ul>

ça marche, mais c'est loin d'ètre valide.

Le li:hover n'est pas supporté par IE (je me demande même si c'est conforme ce truc ?)

Est-ce que c'est seulement possible ?

Modifié 25 Juin 2004 par seb4701

[Hadrien]

Si c'est uniquement cosmétique je pense qu'il vaut mieux ne pas pourrir ton code et te servir du li:hover dans ta css. C'est tout à fait standard.

[Guest meta nando]

Salut,

<ul>
 <a class="link"><li>Hello</li></a>
 <a class="link"><li>World</li></a>
</ul>

Ici <a> qui est un élément en ligne ne peut pas contenir un élément bloc comme <li>.

Il faut écrire <li><a class="link">Hello</a></li>.

Pour changer une puce au survol du lien tu peux essayer:

li {
list-style-type: none;
a {
display: list-item;
list-style-image: url(puce1.png);
}
a:hover {
list-style-image: url(puce2.png);
}

L'élément <a> est transformé en block et en même temps en un élément de liste qui par défaut contient une puce.

Je ne l'ai pas testé Tu nous diras si ca marche.

[Guest meta nando]

J'ai fait le petit test.

En css:

li {
	list-style-type: none;
}
a {
	display: list-item;
	list-style-image: url(image1.png);
}

a:hover {
	list-style-image: url(image2.png);
}

En html:

<ol>
<li><a href="#">lien1</a></li>
<li><a href="#">lien2</a></li>
<li><a href="#">lien3</a></li>
</ol>

Avec Firefox cela fonctionne. Avec IE5.5 évidemment rien ne se passe.

Je me corrige:

«display: list-item;» ne donne pas puce, mais transforme seulement en bloc comme <li>.

[LaurentDenis]

Il te manque la puce, en effet : une règle "marker-offset" sur les <a> pour l'obtenir. Mais son support est très limité, et évidemment inexistant dans IE.

http://www.yoyodesign.org/doc/w3c/css2/gen...f-marker-offset