如何在鼠标悬停社交图标上添加文本

Question

我想知道将鼠标悬停在youtube社交图标上时，要添加的代码是什么：“Vlog即将推出”。感谢

[social_icons icon="fa-youtube" size="fa-2x" link="https://www.youtube.com/" target="_self" icon_color="#fff" background_color="#1f1f1f"]

Answer 1

我刚刚删除了快速的html / css，让您知道如何做到这一点。基本上，您将使用不透明度为0的文本覆盖，然后当您将鼠标悬停在社交图标上时，将不透明度更改为1.

li {
  list-style: none;
}

li {
  position: relative;
}

.overlay-text {
  position: absolute;
  top: 0;
  left: 0;
  
  width: 100%;
  height: 100%;
  
  opacity: 0;
  background: rgba(255, 255, 255, 0.7);
  
  transition: opacity 0.3s;
}

li:hover .overlay-text {
  opacity: 1;
}
li i {
  font-size: 3em !important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>

<div class="social-wrapper">
  <ul>
    <li>
      <i class="fa fa-youtube"></i>
      <div class="overlay-text">
        <h4>Coming Soon!</h4>
      </div>
    </li>
  </ul>
</div>