Le bouton Soumettre disparaît lors du vol stationnaire puis redescend

Question

J'utilise donc CSS: hover pour remplacer un arrière-plan de bouton de soumission. Quand je souris sur le bouton, l'ancienne image de fond disparaît (il semble donc que rien ne s'y trouve) pendant un moment puis réapparaît avec le nouvel arrière-plan. Je pensais que peut-être la taille du fichier image du bouton était trop grande, mais son seul 1.4kb. Y at-il un moyen d'empêcher cela, la mise en cache ou le préchargement, ou quelque chose du genre?

Answer 1

Est-ce uniquement sur l'affichage/le survol de la page initiale? Cela sera dû au fait que le fichier image est chargé uniquement sur demande, c'est-à-dire l'action de survol.

Pour éviter cela, les deux états des boutons doivent être stockés dans un seul fichier. Vous avez juste besoin d'ajuster la propriété background-position pour afficher la moitié correcte de l'image pour son état actuel.

Voici un exemple grossier (notez que button.png contient les deux états d'image et 40 pixels de haut):

button { 
background-image: url(button.png); 
width: 60px; 
height: 20px; 
background-position: 0 0; 
} 

button:hover { 
background-position: 0 -20px; 
} 

Answer 2

C'est parce qu'il faut du temps pour l'image « hover » pour télécharger avant qu'il affiche. Pour éviter cela, vous pouvez utiliser une technique d'image d'image-objet.

Exemple: Using Sprite Images with INPUT for a Hover Effect

Answer 3

Vous pourriez, peut-être, utiliser une technique qui est similaire dans intention, mais pas exécution, à la réponse de Bryn, au-dessus.

.button {background-image: url(img/for/hover-state.png) 
     background-position: top left; 
     background-repeat: repeat-x; 
     background-color: #fff; 
     height: 1.5em; 
     width: 5em; 
} 

.button span 
     {background-image: url(img/for/non-hover-state.png); 
     background-position: top left; 
     background-repeat: repeat-x; 
     background-color: #000; 
     height: 1.5em; 
     width: 5em; 
} 

.button:hover span 
     {background-color: transparent; 
     background-image: none; 
} 

La similitude que j'ai mentionnée est d'avoir les deux images présentes sur le document afin d'éviter le flicker-hover. Au survol du bouton, l'image d'arrière-plan de l'étendue disparaît et révèle l'état du survol au lieu de devoir le charger à la demande. Le bonus est que, bien que j'ai spécifié le height/width ci-dessus cette technique fonctionnera pour le redimensionnement dynamique, ne comptant pas sur les tailles d'images de largeur fixe (ou c'est aussi fluide que votre conception peut le permettre) .