seb4701 Posté 25 Juin 2004 Partager Posté 25 Juin 2004 (modifié) 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 Lien vers le commentaire Partager sur d’autres sites More sharing options...
Hadrien Posté 25 Juin 2004 Partager Posté 25 Juin 2004 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. Lien vers le commentaire Partager sur d’autres sites More sharing options...
Guest meta nando Posté 26 Juin 2004 Partager Posté 26 Juin 2004 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. Lien vers le commentaire Partager sur d’autres sites More sharing options...
Guest meta nando Posté 26 Juin 2004 Partager Posté 26 Juin 2004 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>. Lien vers le commentaire Partager sur d’autres sites More sharing options...
LaurentDenis Posté 26 Juin 2004 Partager Posté 26 Juin 2004 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 Lien vers le commentaire Partager sur d’autres sites More sharing options...
Sujets conseillés
Veuillez vous connecter pour commenter
Vous pourrez laisser un commentaire après vous êtes connecté.
Connectez-vous maintenant