Webmaster Hub > changer la couleur d'un puce au survol

Version complète: sur le forum Webmaster Hub : changer la couleur d'un puce au survol

Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS

seb4701

vendredi 25 juin 2004 à 14:00

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

CODE

<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 :

CODE

<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 ?

Hadrien

vendredi 25 juin 2004 à 14:35

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.

meta nando

samedi 26 juin 2004 à 16:02

Salut,

CODE

<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:

CODE

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.

meta nando

samedi 26 juin 2004 à 18:31

J'ai fait le petit test.

En css:

CODE

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:

CODE

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

samedi 26 juin 2004 à 19:40

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

Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.