Bonjour, je dois créer un site pour lundi et j'aurai besoin d'aide pour un hover. 

J'ai une image que je voudrais remplacer quand on la survole mais rien ne se passe quand je passe dessus mise à part le pointeur.

Voici mon HTML et mon CSS

l'HTML

    <a href="concourschaussure.php"><img class="lachaussure" img src="ultimechaussure.jpg" height="70%" width="71%"></a>

et le CSS

.lachaussure{
    width : 71%;
    height : 70%;
    display : block; 
    background : url("ultimechaussure.jpg") no-repeat;
}

.lachaussure:hover{
    background-image : url("chaussure.jpg");
}

-
Edité par KarlRichard1 24 novembre 2021 à 17:26:19

Bonjour,

merci d'utiliser le bouton </> et non des images pour poster les codes HTML et CSS

Sinon, je vois que on a une image dans la div <img> avec la classe .lachaussure, et en plus une image de fond

On ne met jamais une image en background d'une div <img...>, c'est idiot

donc solution : enlever la balise img qui ne sert à rien, et ajouter à  l'élément parent la classe 'lachaussure'

mais comme c'est un ancre, il faut la passer en inline-block pour qu'elle ait une largeur et une hauteur paramétrable

Mauvaise idée les dimensions en %, il s'agit de pourcentage de quoi ?

-
Edité par ChrisLebure 24 novembre 2021 à 17:23:19

Bonjour,

Merci de colorer votre code à l'aide du bouton Code

Les forums d'Openclassrooms disposent d'une fonctionnalité permettant de colorer et mettre en forme les codes source afin de les rendre plus lisibles et faciles à manipuler par les intervenants. Pour cela, il faut utiliser le bouton de l'éditeur, choisir un des langages proposés et coller votre code dans la zone prévue. Si vous utilisez l'éditeur de messages en mode Markdown, il faut utiliser les balises <pre class="brush: xml;">Votre code ici</pre>.

Merci de modifier votre message d'origine en fonction.