将鼠标悬停在图像上时如何创建弹出文本框？ （HTML，CSS）

Question

因此，我要完成的工作的基础知识是：我有一幅图像（一幅画。）在该图像的顶部，右上角有一个较小的图像（“ i”表示“信息”。）要使其悬停在“ i”上时，将出现一个文本框，其中包含3行文本（有关绘画的信息）。

Answer 1

没有任何代码，我想您想要执行以下操作：

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>