悬停时如何显示文本？

Posted 2023-05-08

【中文标题】悬停时如何显示文本？

【英文标题】：How to show a text when hovering?

【发布时间】：2014-03-25 07:43:39

【问题描述】：

我有一个页脚，其中有不同的社交媒体图标。现在，我想创建一个悬停效果，显示悬停图标的名称。

例如：我的鼠标在 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>

【问题讨论】：

工具提示功能是否为您提供所需的功能？

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

我想我明白你的意思......工具提示很可能会在图像上方的某个位置（在非特定位置）显示文本，而你想要的是文本出现在每个图像正下方的指定位置。对吗？

这样的事情是否反映了您的需求？ jsfiddle.net/BC4eY/1581

如果 @Stu1986C 解决方案不起作用，请尝试以下方法之一：我目前在一个网站上使用它：jquerytools.org/demos 你也有这个：jqueryui.com/tooltip

【参考方案1】：

我个人在我使用的任何标签中都使用title="" 工具提示。

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

这个title="" 工具提示似乎适用于任何地方和任何东西。

【讨论】：

谢谢 Léla，你让我开心！

【参考方案2】：

我假设只有 CSS 的答案是您正在寻找的。 您可以使用 visibility 和 :hover 使用 CSS 来完成此操作

这是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 属性以使悬停看起来更平滑。就像淡入一样。