鼠標懸停在圖像上的文字？

我想顯示圖片上的文字時，一個漫遊者懸停在它（不使用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

鼠標懸停在圖像上的文字？

回答

相關問題