html - 将鼠标悬停在图像上时如何创建弹出文本框？ (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>