如何在懸停時顯示文字？

我有一個頁腳，其中我有不同的社交媒體圖標。現在，我想創建一個懸停效果，其中顯示懸停圖標的名稱。如何在懸停時顯示文字？

例如：我的鼠標在Facebook的圖標，然後將文本的Facebook'應該拿出在一個div，位於下面一個div！

我知道如何創建這一點，但是，我不知道我是如何在相同的位置顯示在同一div這些名字。我怎樣才能做到這一點？

<div id="footer1" style="position: fixed; bottom: 0;"> 
    <div class="content-wrapper"> 
     <div class="ft-div-left"> </div> 
     <div class="ft-div-right"> 
     <p></p> 
     </div> 
     <div class="ft-div-middle"> 
     <center> 
      <p> 
      <center> 
       <a href="" style="text-decoration:none; color:white;"><span class="" style="color: white;"></span></a> 
       <a href="" style="text-decoration:none; color:white;"><span class="" style="color: white;"></span></a> 
       <a href="" style="text-decoration:none; color:white;"><span class="icon-stumbleupon3" id="issuu" style="color: white;"></span></a> 
       <a href="" style="text-decoration:none; color:white;"><span class ="icon-twitter3"></span></a> 
       </br> 
       <br> 
       <br> 
       <span style="font-family:'Open Sans',sans-serif; font-size:11px; color:grey;">&copy; 2014. All Rights Reserved.</span> 
      </center> 
      </p> 
     </center> 
     </div> 
     <div id="hoverText"> 
     <span>Here goes the text</span> 
     </div> 
    </div> 
    </div>

來源

2014-02-23 fjw

工具提示功能是否爲您提供了所需的功能？ – Stu1986C

我一直在考慮這個問題，但這不是我想要的工作方式！你明白我的意思嗎？ – fjw

我想我明白你的意思......一個工具提示最有可能在圖像上的某處顯示文本（在一個非特定的地方），而你想要的是文本出現在每張圖像正下方的指定位置。正確？ – Stu1986C

我假設一個CSS只有答案是你在找什麼。可以使用visibility和ofcourse :hover

這裏的Jsfiddle

例如用CSS這樣做：

HTML的

  <div id="facebookicon"> 
       <img src="https://www.facebookbrand.com/img/assets/asset.f.logo.lg.png"> </img> 
       </div> 
      <div id="onhoverfb">Follow Us</div>

CSS -

  #onhoverfb{ 
       visibility: hidden; 
      } 
      #facebookicon:hover ~ #onhoverfb{ 
       visibility: visible; 
      }

Remembe r將:hover設置爲將要懸停的div。

附加：您可以隨時添加的CSS屬性transition有懸停顯得更順暢。像

來源

2014-02-23 21:24:48 YourFriend

在衰落。我個人使用裏面我使用任何標籤的title=""提示。

<div id="hoverText"> 
    <span title="hover text">Here goes the text</span> 
</div>

這title=""提示似乎在任何地方和任何東西的工作。

來源

2014-03-16 00:58:53

謝謝萊拉，你讓我的一天！ –

如何在懸停時顯示文字？

回答

相關問題