使图像出现在链接悬停css上答案

【问题标题】：Make image appear on link hover css使图像出现在链接悬停css上
【发布时间】：2013-10-16 17:27:17
【问题描述】：

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

希望大家能帮帮我！

【问题讨论】：

对我来说似乎工作正常？ fiddle

标签： css image hyperlink hover

【解决方案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 */
}

【讨论】：

@tnkh 你能解释一下这个例子的哪一部分在 Firefox 中不适合你吗？

【解决方案2】：

尝试将图像放在 href 中，并赋予'display: none'的样式

然后：

a:hover img{ display: block; }

将鼠标悬停在

上时应该显示图像

【讨论】：

这可能导致SEO出现问题。给锚定一个高度会使它过时并且对 SEO 更友好。

【解决方案3】：

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

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

【讨论】：