將鼠標懸停在圖像上時如何創建彈出文本框？ （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>