css - Glyphicon 不会完全隐藏在 CSS3 悬停动画上

Question

有谁知道当您将鼠标悬停在卡片的白色背景上时如何让蓝色图标消失？我尝试将动画设置为在鼠标触摸卡片中的任何位置时发生，而不仅仅是直接在图标上。

现在很不稳定。当您将鼠标靠近它时，蓝色图标会闪烁，最后它会消失一秒钟，然后又会回来。一点都不流畅。

感谢您的帮助。

body {
  background-color: #f3f3f3;
}
.fa {
  margin-top: 40px;
  color: #0088ce; 
}
.textanim-container {
  background-color: #fff;
  position: relative;
  max-width: 360px;
  min-height: 243px;
  margin: auto;
  overflow: hidden;
  margin-top: 50px;
  box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.08);
}
.textanim-title {
  margin: 0;
  position: absolute;
  width: 100%;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  transition: 0.5s;
}
.textanim-container:hover {
  top: 10px;
  transform: bottom 0.64s, opacity 0.63s cubic-bezier(0.33, 0.66, 0.66, 1)
}
.textanim-hidden {
  width: 100%;
  position: absolute;
  top: 400px;
  /*opacity: 0.5;*/
  transition: 0.8s;
  text-align: center;
  right: 3px;
  padding: 15px;
}

.textanim-container:hover .textanim-hidden {
  top: 50%;
  transform: translateY(-50%);
  color: #444;
  /*background-color: #0088ce;*/
  /*color: #fff;*/
}
.disappear:hover {
  color: #fff;
}

/*
.fa:hover {
  color: #fff;
}*/

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" rel="stylesheet">

<div class="textanim-container text-center disappear">
  <div class="disappear">
  <i class="fa fa-user fa-4x disappear" aria-hidden="true"></i>
  <h3 class="textanim-title disappear">One Account Manager</h3>
  </div>
  <span class="textanim-hidden">
    For groups over 100, we assign a single account manager, someone who'll get to know your group and respond quickly to queries. Under 100? You'll still get the benefit of our AMs' expertise—and one number, one email.
  </span>
</div>

Answer 1

将以下代码添加到您的 css 中以解决问题

.textanim-container:hover .fa.fa-user{
  display:none;
}