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

Question

我试图完成的基本知识是： 我有一张图片（一幅画） 我在右上角有一个较小的图像（＆＃34; i＆＃34;用于＆＃34;信息。＆＃34;） 我希望在将鼠标悬停在＆＃34; i＆＃34;上时，会出现一个文本框，其中包含3行文字（有关绘画的信息。）

Answer 1

没有任何代码，我想你想做这样的事情：

https://jsfiddle.net/ryanpcmcquen/n37bdvzq/

＆＃13;

＆＃13;

.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;
}

＆＃13;

<div>
  <img src="https://yogifil.la/200/200" />
  <div class="hoverinfo"> <span>i</span>

    <p>3
      <br>lines
      <br>of text</p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;