Évitez vacillante de la souris

Question

J'ai un lien simple dans un menu

<a id="Home" href="Amico-Bio-Home-Page"></a> 

auquel j'appliquer le style suivant

#Home{ 
background-image:url(../Images/Menu/home.png); 

background-repeat: no-repeat; bordure: aucune; affichage: bloc; hauteur: 70px; text-decoration: aucune; largeur: 78px; flotteur: gauche; rembourrage: 0 7px; }

#Home:hover { 
background-image: url(../Images/Menu/homeOn.png); 
} 

quand je vais sur le lien les images sont permutées.

Lors de l'échange des images, le lien disparaît un instant.

Savez-vous un moyen de l'éviter?

grâce

Answer 1

Sprites: Is css-sprite a good technique?

Answer 2

Vous devez utiliser des feuilles de sprite d'image. Pour un tutoriel détaillé sur les regarder ici: http://css-tricks.com/css-sprites/

Answer 3

partie html

<a><img src="homeOn.png" alt="" width="" height="" /></a> 

partie css

a {height:px;width:px;background-image:url(home.png)} 
a:hover img {visibility:hidden} 

ajouté de bonus plus IE6 flicker

Answer 4

Je suggère d'éviter les images tout à fait et utiliser les CSS pour styler vos liens. Vous pouvez accomplir beaucoup de choses avec les dégradés de fond et de bordure CSS3, les ombres au texte et plus encore. Découvrez: http://www.webdesignerwall.com/tutorials/css3-gradient-buttons/ et http://webdesignledger.com/tutorials/12-excellent-css3-button-and-menu-techniques pour l'inspiration et le code.