如何在鼠标悬停时显示文本？

Question

我有一个页脚，其中包含了我各种社交媒体的不同图标。现在，我想要创建一个悬停效果，当悬停在图标上时，显示图标名称。

例如：当鼠标悬停在Facebook图标上时，在下面的div中应该出现文本“Facebook”！

我知道如何创建这个效果，但我不知道如何在同一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>

- fjw

---

工具提示功能是否提供您所需的内容？ - Stu1986C

我已经思考了很长时间，但这不是我想要的工作方式！你明白我的意思吗？ - fjw

我想我明白你的意思... 工具提示通常会在图像上方的某个位置显示文本（位置不确定），而你想要的是文本出现在每个图像下方的指定位置。是这样吗？ - Stu1986C

这个是否反映了您所需的内容？http://jsfiddle.net/BC4eY/1581/ - Stu1986C

如果@Stu1986C的解决方案不起作用，请尝试以下解决方案之一：我当前在网站上使用此解决方案：http://jquerytools.org/demos/，您也可以尝试使用此解决方案：https://jqueryui.com/tooltip/。 - CodeBird

Answer 1

我个人会在任何标签内使用 title="" 工具提示。

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

这个 title="" 工具提示似乎在任何地方、任何东西上都可以使用。

- osyra42

---

谢谢Léla，你让我的一天变得美好！ - Jorge Barroso

Answer 2

我假设你需要的是纯CSS解决方案。 你可以使用CSS中的visibility和当然还有:hover来实现这一点。

这里是Jsfiddle。

示例：

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;
            }

记得在要悬停的 div 上设置 :hover。

额外提示：您可以随时添加 css 的 transition 属性，使悬停效果更加平滑。就像淡入一样。

- YourFriend