将鼠标悬停在图像上时如何创建弹出文本框？（HTML，CSS）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32486815/
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 do I create a popup text box when hovering over an image? (html, CSS)
提问by Ian Redford
The basics of what I'm trying to accomplish are thus: I have an image (a painting.) I have a smaller image on top of that one, in the top right corner (an "i" for "information.") I want to make it so when hovering over the "i", a text box appears, with 3 lines of text (information about the painting.)
我想要完成的基本任务是：我有一个图像（一幅画）。我在那个图像的顶部有一个较小的图像，在右上角（“i”代表“信息”。）我想要使鼠标悬停在“i”上时，会出现一个文本框，其中包含 3 行文本（有关这幅画的信息。）
回答by ryanpcmcquen
Without having any code, I think you want to do something like this:
没有任何代码，我想你想做这样的事情：
https://jsfiddle.net/ryanpcmcquen/n37bdvzq/
https://jsfiddle.net/ryanpcmcquen/n37bdvzq/
.hoverinfo {
position: absolute;
top: 15px;
left: 15px;
font-size: 28px;
color: #ffffff;
cursor: pointer;
}
.hoverinfo p {
display: none;
color: #000000;
}
.hoverinfo:hover p {
background-color: rgba(255, 255, 255, 0.7);
display: block;
}<div>
<img src="https://yogifil.la/200/200" />
<div class="hoverinfo"> <span>i</span>
<p>3
<br>lines
<br>of text</p>
</div>
</div>