鼠标悬停在图像上的文字？

我想显示图片上的文字时，一个漫游者悬停在它（不使用JS），我试着玩弄HTML/CSS和看看在stackoverflow，仍然找不到实现此功能的方法。任何人有想法？再次感谢您的帮助。鼠标悬停在图像上的文字？

事实上已经有文字（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

来源

2016-11-16 Jordan Miguel

的想法文字在图像悬停时显示在图像上。如果是，则显示该<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>

编辑：居中文本

来源

2016-11-16 23:46:43 k97513

哇，由于一许多。这基本上解决了它，但是文字稍微显示在我的图像上，我如何确保它显示在中心？ –

您可以设置“p”的宽度并将“text-align”设置为居中，这将使文本居中。 – k97513

我将它添加到原始文章中。 – k97513

鼠标悬停在图像上的文字？

回答

相关问题