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中以修复isssue

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

Answer 2

将鼠标悬停在白色区块上时，将display:none添加到图标。

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-container:hover .fa-user{
  display:none;
}
.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>

Glyphicon不会完全隐藏在CSS3 Hover Animation上

2 个答案: