使图像出现在链接悬停 css 上
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19270594/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make image appear on link hover css
提问by Jacob
I am working with this, probably simple solution, but I couldn't find any help on stackoverflow or the internet relating to this specific problem.
我正在使用这个，可能是简单的解决方案，但我找不到有关此特定问题的有关 stackoverflow 或 Internet 的任何帮助。
I have a menu, and I want to make an image appear under the link or close by when you hover over it. I hope this can be done in CSS. This is my code so far.
我有一个菜单，我想让一个图像出现在链接下或当你将鼠标悬停在它上面时。我希望这可以在 CSS 中完成。到目前为止，这是我的代码。
HTML
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>
And this is the CSS so far:
这是到目前为止的 CSS：
a:hover
{
background-image: url('image/circle.PNG');
background-repeat: no-repeat;
}
Hope you guys can help me!
希望大家帮帮我！
回答by matewka
The clean way to deal with it is to use :afterpseudo element
处理它的干净方法是使用:after伪元素
a:hover:after {
content: url(image/circle.PNG); /* no need for qoutes */
display: block;
}
You don't even need the image to be present in the DOM.
Also remember that the path to the image will be relative to the CSS file, not the HTML file.
您甚至不需要图像出现在 DOM 中。
还要记住，图像的路径将相对于 CSS 文件，而不是 HTML 文件。
Of course, the image will pushdown the content below the anchor. To avoid this you can try:
当然，图片会下推锚点下方的内容。为避免这种情况，您可以尝试：
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 */
}
回答by Pat Dobson
Try putting the image withinthe href and giving a style of 'display: none'
尝试将图像放在href 中并给出“显示：无”的样式
Then:
然后：
a:hover img{ display: block; }
That should display the image when hovering on the
将鼠标悬停在
回答by Dale
For background-image you need to give the anchor a width, height (or relevant padding) and display it as a block.
对于背景图像，您需要为锚点指定宽度、高度（或相关填充）并将其显示为块。
a:hover
{
background-image: url('image/circle.PNG');
background-repeat: no-repeat;
background-position: center bottom;
height:20px
width:100px;
display:block;
}
