使图像出现在链接悬停css上
Posted
技术标签:
【中文标题】使图像出现在链接悬停css上【英文标题】：Make image appear on link hover css 【发布时间】：2013-10-16 17:27:17 【问题描述】：我正在使用这个可能很简单的解决方案，但我在 *** 或与此特定问题相关的互联网上找不到任何帮助。
我有一个菜单，我想让图片显示在链接下方或当您将鼠标悬停在其附近时。我希望这可以在 CSS 中完成。这是我目前的代码。
<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" src="images/laerkeryg.jpg"/>
<img id="cirkler" 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" src="images/circle.PNG"/>
</body>
</html>
这是目前的 CSS：
a:hover
background-image: url('image/circle.PNG');
background-repeat: no-repeat;
希望大家能帮帮我！
【问题讨论】：
对我来说似乎工作正常？ fiddle 【参考方案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;
【讨论】：
以上是关于使图像出现在链接悬停css上的主要内容，如果未能解决你的问题，请参考以下文章