图标上的自定义悬停CSS

Question

我想将CSS添加到此电子邮件图标中，并用鼠标悬停后，该图标的位置会稍微向上移动，并从下面显示该图标的说明。我已经包含了一个悬停前和之后的图片。任何帮助将不胜感激

Answer 1

您应该研究几件事，这将有助于实现您想要的效果。第一个是:hover选择器：

  

：hover选择器用于将元素悬停在元素上。

这允许您在将鼠标悬停在元素上时将某些样式应用于元素。

---

我接下来要研究的是transition；这使您可以在特定状态或所有状态之间进行平滑过渡：

  

要创建过渡效果，您必须指定两件事：

     

  

• 您要为其添加效果的CSS属性

  

• 效果持续时间

  

---

最后，我将对将样式应用于子元素和类进行一些研究。 SO post很好地总结了一个完整的问题（this one也是如此）。

---

下面的代码片段将产生您想要的效果，但是我强烈建议您研究HTML和CSS的结合以及它们如何协同工作。这不是最干净的解决方案，但是它使您了解从哪里开始。尝试使用这些值来查看发生了什么变化，以便您可以进一步了解每件作品的用途。

.container {
  width: 100px;
  height: 100px;
  background-color: #333;
  color: #eee;
  text-align: center;
  cursor: pointer;
}
.container i {
  width: 100%;
  position: relative;
  top: 25%;
  font-size: 1.5em;
  transition: 0.5s all;
}
.container span {
  opacity: 0;
  position: relative;
  top: 25%;
  transition: 0.5s all;
}
.container:hover i {
  top: 15%;
  font-size: 2em;
  color: #fc3;
}
.container:hover span {
  opacity: 1;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<div class="container">
  <i class="fas fa-mobile icon" aria-hidden="true"></i>
  <span>Mobile</span>
</div>