web-dev-qa-db-fra.com

Faire apparaître l'image sur le lien hover css

Je travaille avec cette solution, probablement simple, mais je n'ai trouvé aucune aide sur stackoverflow ou sur Internet concernant ce problème spécifique.

J'ai un menu et je souhaite faire apparaître une image sous le lien ou la fermer lorsque vous la survolez. J'espère que cela peut être fait en CSS. C'est mon code jusqu'à présent.

HTML

<html>
    <head>
        <title></title>

        <link rel="stylesheet" type="text/css" href="startpage.css">


        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
     <div id="wrapper">


         <img id="baggrund" width="166" height="327" alt="back image" src="images/laerkeryg.jpg"/>
         <img id="cirkler" width="319" height="249" alt="circles" src="images/circles.PNG"/>
         <div id="header">/jacob gerlif pilegaard/</div>
         <div id="underheader">portfolio</div>   
          <ul>
            <li><a href="index.html">home</a></li>
            <li><a href="about.html">about</a></li>
            <li><a href="gallery.html">gallery</a></li>
            <li><a href="contact.html">contact</a></li>
            </ul> 
         </div>
     <img id="menucircle" width="50" height="50" alt="menu circle" src="images/circle.PNG"/>
          </body>
</html>

Et voici le CSS jusqu'à présent:

a:hover
{
    background-image: url('image/circle.PNG');
    background-repeat: no-repeat;
}

J'espère que vous pourrez m'aider!

cssimagehyperlinkhover
10
Jacob

La manière la plus simple de gérer ce problème consiste à utiliser :after pseudo-élément

a:hover:after {
    content: url(image/circle.PNG); /* no need for qoutes */
    display: block;
}

Vous n'avez même pas besoin que l'image soit présente dans le DOM.
Souvenez-vous également que le chemin d'accès à l'image sera relatif au fichier CSS, pas au fichier HTML.

Bien sûr, l'image Push vers le bas du contenu sous l'ancre. Pour éviter cela, vous pouvez essayer:

a:hover {
    position: relative;
}
a:hover:after {
    content: url(image/circle.PNG); /* no need for qoutes */
    display: block;
    position: absolute;
    left: 123px; /* change this value to one that suits you */
    top: 56px; /* change this value to one that suits you */
}
24
matewka

Essayez de mettre l'image à l'intérieur le href et en donnant un style de 'display: none'

Alors:

a:hover img{ display: block; }

Cela devrait afficher l'image lors du survol du

3
Pat Dobson

Pour l'image d'arrière-plan, vous devez donner à l'ancre une largeur, une hauteur (ou un rembourrage approprié) et l'afficher sous forme de bloc.

a:hover
{
    background-image: url('image/circle.PNG');
    background-repeat: no-repeat;
    background-position: center bottom;
    height:20px
    width:100px;
    display:block;
}
1
Dale