Question

我正在使用这个，可能是简单的解决方案，但我找不到有关此特定问题的stackoverflow或互联网上的任何帮助。

我有一个菜单，我希望在链接下方显示图像，或者当您将鼠标悬停在链接上时。我希望这可以在CSS中完成。到目前为止，这是我的代码。

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>

到目前为止这是CSS：

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

希望你们能帮助我！

Answer 1

处理它的干净方法是使用:after伪元素

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

您甚至不需要图像存在于DOM中还要记住，图像的路径是相对于CSS文件而不是HTML文件。

当然，图像将按向下按下锚点下方的内容。为避免这种情况，您可以尝试：

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 */ }

Answer 2

尝试将图像放在 href中并给出'display：none'样式

然后：

a:hover img{ display: block; }

当悬停在

上时，应显示图像

Answer 3

对于背景图像，您需要为锚点赋予宽度，高度（或相关填充）并将其显示为块。

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

使图像显示在链接悬停css上

3 个答案: