Changer une image au survol avec CSS Fermé

Question

Bonjour à tous, J'essaye de créer des boutons avec HTML et CSS (sans passer par du javascript). J'ai donc créer une lien grace à une image, j'aurais aimé que l'image se modifie au survol, mais je n'y arrive pas. Auriez vous une idée de la facon de procéder ? Merci d'avance à tous et bonne soirée ! Code HTML de ma page : Essai

Code CSS : a.lien /* Liens par défaut (non survolés) */ { text-decoration: none; color: white; font-style: italic; } a.lien:hoover { } Configuration: Windows Vista / Firefox 3.5.2

Tralala8 · Answer

Bonjour,

Pour commencer, j'enlèverais l'image contenue dans la balise <a>.

Ensuite, je ferais ma feuille CSS de cette façon :


a.lien{
     display: block;
     width: ...px; //mettre la largeur de l'image
     height: ...px; //mettre la hauteur de l'image
     background: url(img/accueil.jpg) center top no-repeat;
}

a.lien:hover{
     background-position: center bottom;
}


L'idéal est d'avoir une image regroupant tes deux photos l'une au dessus de l'autre, ça évite un temps de chargement lors du survol.

Voila une solution avec uniquement du CSS. Maintenant si tu veux garder ta balise, je ne vois pas comment faire autrement qu'avec du javascript.

hiddan · Answer

Ca marche bien avec
a.lien:hover{
     background: url(images/accueilbis.jpg);
}

Merci beaucoup pour votre réponse !

Changer une image au survol avec CSS

2 réponses

Discussions similaires