如何在悬停时显示文字？

Question

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

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

Answer 1

我个人在我使用的任何标签内使用

title=""

工具提示。

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

这个

title=""

工具提示似乎适用于任何地方和任何事物。

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

属性以使悬停显示更平滑。就像淡入一样。

Answer 3

我经历了三天的地狱般的经历，试图在中途停留和取消战斗后回家。由于没有工作人员而错过了航班。我们本来应该周六回家，但需要周一回家，躺在水泥地板上，没有酒店、食物或行李，我想要全额退款。今年我乘坐美国航空前往英国四次，从来没有受到过如此糟糕的对待。我丈夫 70 岁，我 63 岁，睡在拿骚机场的水泥地板上，没有更黑的东西，只有一个小机场枕头