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

我想要完成的基础知识是这样的：我有一个图像（一幅画）。我在右上角有一个较小的图像，我“为”信息“。））我想让它悬停在”我“上时，出现一个文本框，其中有3行文字（关于绘画的信息）。如何在图像上悬停时创建弹出文本框？（html，CSS）

2015-09-09 Ian Redford

请在您的问题中向我们显示您当前的HTML/CSS。 –

@Ian Redford在这里发布你的代码，并且向我们介绍你的意思是什么文本框？你在说文字吗？或[工具提示]（http://jsfiddle.net/greypants/zgCb7/） – divy3993

您能否向我们介绍更多？ – divy3993

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

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>

来源

2015-09-09 18:56:09 ryanpcmcquen

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

回答

相关问题

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