将鼠标悬停在图像上时,如何创建弹出文本框? (html,CSS)

时间:2015-09-09 18:31:02

标签: html css textbox popup hover

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

1 个答案:

答案 0 :(得分:6)

没有任何代码,我想你想做这样的事情:

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>
&#13;
&#13;
&#13;