changement d'image de fond de li sur un a: hover

Question

J'ai un menu: (. Contenant des coins arrondis en bas)

<div id=menu> 
    <ul=navigation> 
    <li><a href=>Home</a></li> 
    </ul> 
</div> 

Avec la technique de portes coulissantes Je veux créer mon bouton

I peut obtenir ce travail, en passant le a et le li. Mais le li est plus grand, et si je plane au-dessus du li, sans planer le a, seule l'image de fond pour le li montre.

Maintenant, je me demande s'il y a un moyen de relier le vol stationnaire du li et le vol stationnaire de l'a dans css. Je préfère résoudre ce problème sans utiliser javascript.

Googleing ne m'a pas aidé plus loin. Je suppose que ce n'est pas possible, mais je voulais être sûr avant d'essayer d'autres options.

Merci d'avance pour tout conseil/aide/suggestion.

Answer 1

D'après ce que je vous rassemblerai ne peut pas faire ce que vous recherchez dans la comme vous l'avez décrit. Cependant, ce que je ferais est de faire l'affichage "a tag" comme un bloc et de définir la largeur et la hauteur pour remplir le "LI" de telle façon que vous pouvez utiliser: hover et changer tout le bg qui le fait ressembler à LI change

 

li a { 
    background:#000 url(images/bg.png) no-repeat 0 0; 
    display:block; 
    height:20px; 
    width:100px; 
} 
li a:hover { 
    background:#fff url(images/bg.png) no-repeat 0 -20px; 
} 
 

également utiliser un certain rembourrage pour asseoir le texte au bon endroit dans le « LI » et enlever tout rembourrage de la « LI »

li: hover est pas pris en charge sans JS en plus versions de IE donc en utilisant un: hover à la place fournit une meilleure compatibilité inter-navigateur

Answer 2

Vous pouvez le faire simplement avec:

<div id=menu> 
    <ul> 
    <li><a href=>Home</a></li> 
    </ul> 
</div> 

Puis dans votre CSS:

#menu ul li:hover{ 
    background-image:url(newimage); 
} 

Si vous avez besoin conformité IE6, il suffit de faire vos liens remplir toute la largeur de l'UL de.

#menu ul li a:link, #menu ul li a:visited{ 
    display:block; 
    width:999px; <-- enter pixels 
    height:999px; <-- enter pixels 
} 

puis modifier l'image de fond normalement avec:

#menu ul li a:hover{ 
    background-image:url(newimage); 
} 

Answer 3

#menu li { 
    /* normal li style */ 
} 

#menu li a { 
    /* normal a style */ 
} 

#menu li:hover { 
    /* hover li style */ 
} 

#menu li:hover a { 
    /* hover a style */ 
} 

ne fonctionne pas avec IE6 ...