鼠标悬停在图像上的文字?
问题描述:
我想显示图片上的文字时,一个漫游者悬停在它(不使用JS),我试着玩弄HTML/CSS和看看在*,仍然找不到实现此功能的方法。任何人有想法?再次感谢您的帮助。鼠标悬停在图像上的文字?
事实上已经有文字(h2)在图像下方令我困惑,我试图用这种方法(Text on image mouseover?)并失败。
HTML
<ul class="portfolio">
<li class="project option-1">
<div class="project-image">
<a href="default.asp"><img src="http://lorempixel.com/400/400/sports/1/" alt="Sports Image"/>
</div>
<div class="project-info">
<h2 class="project-info-title">Cricket Journey</h2>
</a>
</div>
</li>
我不显示的CSS,因为我已经有一个如何实现。如果我理解正确的话,您希望此功能的HTML方面,但不是CSS
答
的想法文字在图像悬停时显示在图像上。如果是,则显示该<p>
(其是图像后右)当图像被悬停在如下:
p {
/* position the text */
position: absolute;
left: 0px;
display: none;
width: 300px;
text-align: center;
margin: 0;
height: 20px;
top: 140px;
}
img {
position: absolute;
left: 0;
top: 0;
}
img:hover + p {
display: block;
}
<img src="/favicon.ico" height="300">
<p>some text to display here</p>
编辑:居中文本
哇,由于一许多。这基本上解决了它,但是文字稍微显示在我的图像上,我如何确保它显示在中心? –
您可以设置“p”的宽度并将“text-align”设置为居中,这将使文本居中。 – k97513
我将它添加到原始文章中。 – k97513