14

我正在使用这个，可能是简单的解决方案，但我在 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;
}

希望你们能帮助我！

4

3 回答 3

32

处理它的干净方法是使用: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 */
}
于 2013-10-09T11:27:54.913 回答
4

尝试将图像放在href 中并给出“显示：无”的样式

然后：

a:hover img{ display: block; }

将鼠标悬停在

于 2013-10-09T11:22:55.963 回答
1

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

a:hover
{
    background-image: url('image/circle.PNG');
    background-repeat: no-repeat;
    background-position: center bottom;
    height:20px
    width:100px;
    display:block;
}
于 2013-10-09T11:23:44.637 回答