CSS 如何使用css在悬停时在图像上显示图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18361924/
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
How to display image over image on hover with css
提问by costumingdiary
I have a gallery of images with links.
我有一个带有链接的图片库。
Edit: Here's the code I have to work with:
编辑：这是我必须使用的代码：
<div class="gallerypagetabs"><a href="http://costumingdiary.blogspot.com/2013/01/victorian-tardis-purse.html"><img alt="Free Victorian Purse Pattern" src="https://lh3.googleusercontent.com/-m4y6eS2KGRQ/Ug7TKD3sbYI/AAAAAAAAHNc/6qoeuGedjOY/s200-c/free-victorian-purse-pattern-1.jpg"><br>Free Victorian Purse Pattern</a><a href="http://costumingdiary.blogspot.com/2012/12/natural-form-victorian-overskirt.html"><img alt="Natural Form Victorian Overskirt" src="https://lh3.googleusercontent.com/-ZrTDaXEOiiU/US__mPzz3dI/AAAAAAAADWQ/eBm3tO3P8oI/s200-c/IMG_5482%255B6%255D.jpg"><br>Natural Form Victorian Overskirt</a><a href="http://costumingdiary.blogspot.com/2012/11/truly-victorian-tv221-1878-tie-back.html"><img alt="Truly Victorian TV221 1878 Underskirt Pattern Review" src="https://lh4.googleusercontent.com/-GmrRTxJ5NGY/UKfO_SQzymI/AAAAAAAAAHA/A9qx6czpyJk/s200-c/Truly-Victorian-TV221-1878-Tie-Back-%255B1%255D%255B4%255D.png"><br>Truly Victorian TV221 1878 Underskirt Pattern Review</a><a href="http://costumingdiary.blogspot.com/2012/10/truly-victorian-tv121-petticoat-pattern.html"><img alt="Truly Victorian TV121 Petticoat Pattern Review" src="http://lh4.ggpht.com/-qTsclIxCTKY/UH7fK3jqKII/AAAAAAAAodI/2GaQOVrGuuA/s200-c/Truly%252520Victorian%252520TV121%2525201879%252520Petticoat%252520with%252520Detachable%252520Train%25255B6%25255D.png?imgmax=800"><br>Truly Victorian TV121 Petticoat Pattern Review</a>..ad naseum..</div>
CSS:
CSS：
.gallerypagetabs a,.gallerypagetabs p{
float:left;
font-size:.80em;
height:250px;
padding:10px;
text-align: center;
width:200px
}
What I'd like to do is show a transparent image with stars on them when someone hovers over the image. So if a person hovers over the Free Victorian Purse Pattern image, they'll see an image of - let's say - five stars indicating that the pattern has received a rating of 5 out of 5 stars from me.
我想做的是当有人将鼠标悬停在图像上时显示一个带有星星的透明图像。因此，如果一个人将鼠标悬停在“免费维多利亚式钱包图案”图像上，他们会看到一个图像 - 比方说 - 五颗星，表明该图案已获得我的 5 颗星中的 5 颗星评级。
I've tried both of the following with no luck. The code shows the image on hover, but it shows at the bottom of the image instead of overlapping it:
我已经尝试了以下两种方法，但都没有运气。代码在悬停时显示图像，但它显示在图像的底部而不是重叠：
.gallerypagetabs a:hover{
background-image:url('http://i.imgur.com/IKAXZKz.png');
background-position:inherit
}
AND
和
.gallerypagetabs a:hover{
background-image:url('http://i.imgur.com/IKAXZKz.png');
background-position:inherit;
z-index:10
}
Any advice? I don't want to use Javascript, and I want to add as little coding to the HTML as possiblecannot change the html other than adding another class or id at the beginning of it. It all has to be done through CSS. Here's how I'd like it to look. Thanks for your help!
有什么建议吗？我不想使用 Javascript，我想向 HTML 添加尽可能少的编码，除了在它的开头添加另一个类或 id 之外，不能更改 html。这一切都必须通过 CSS 来完成。这是我希望它的外观。谢谢你的帮助！
The code that WORKS! (Thanks cimmanon!)
(Changed gallerypagetabs to gallerypatterntab to isolate the class from the rest of the blog. Screenshot from Blogger - yeah Blogger likes to rewrite things like quotations)
有效的代码！（感谢 cimmanon！）（将 gallerypagetabs 更改为 gallerypatterntab 以将类与博客的其余部分隔离开来。来自 Blogger 的屏幕截图 - 是的，Blogger 喜欢重写引文之类的内容）
回答by cimmanon
You can use a pseudo element for this purpose. No need for extra markup.
为此，您可以使用伪元素。不需要额外的标记。
http://cssdeck.com/labs/anxnrkhr
http://cssdeck.com/labs/anxnrkhr
<a href="#"><img src="http://placekitten.com/100/100" /></a>
a {
position: relative;
display: inline-block;
}
a:hover:before {
content: '';
display: block;
background: rgba(255, 0, 0, .5); /* your background */
width: 20px; /* image width */
height: 100px; /* image height */
position: absolute;
top: 0;
right: 0;
}
回答by Itay
Putting the image on the anchor's backgroundisn't going to work because the image will hide it.
将图像放在锚点的背景上是行不通的，因为图像会隐藏它。
You can add an element containing the stars in an absolute positioninside the anchor:
您可以在锚点内的绝对位置添加一个包含星星的元素：
<a href="http://costumingdiary.blogspot.com/2013/01/victorian-tardis-purse.html">
<img src="https://lh3.goog...An-purse-pattern-1.jpg" alt="Free.. Pattern">
<br>
Free Victorian Purse Pattern
<i class="stars"></i>
</a>
And a CSS similar to this (all numbers can vary):
和类似的 CSS（所有数字都可能不同）：
a {
position: relative;
}
.stars {
background-image:url('http://i.imgur.com/IKAXZKz.png');
background-position:inherit;
width: 20px;
height: 80px;
position: absolute;
right: 10px;
top: 10px;
display: none;
}
a:hover .stars {
display: block;
}
P.S - <br />is supposed to be self-closing. And it's better not using it only to make a new line after the image, but maybe give the image this style:
PS -<br />应该是自动关闭的。最好不要只使用它在图像后创建一个新行，而是给图像这种风格：
a img {
display: block;
}
回答by Mister Epic
This is untested, but I think you want something like:
这是未经测试的，但我认为您想要的是：
.gallerypagetabs a, .gallerypagetabs img{
position:absolute;
z-index:1;
}
.gallerypagetabs a:hover{
z-index:2;
}
.gallerypagetabs{
position:relative;
}
This is untested, but hopefully gives you an idea about how to realize the effect you are after.
这是未经测试的，但希望能让您了解如何实现您所追求的效果。
