0
Weiß jemand, wie ich das blaue Symbol verschwinden lassen kann, wenn Sie den Mauszeiger über den weißen Hintergrund der Karte bewegen? Ich habe versucht, die Animation so einzurichten, dass sie immer dann erfolgt, wenn die Maus irgendwo auf der Karte und nicht direkt über dem Symbol auftaucht.Glyphicon wird nicht vollständig auf CSS3 verstecken Hover Animation
Es ist jetzt wackelig. Das blaue Symbol blinkt, wenn Sie Ihre Maus in die Nähe bringen und es verschwindet für eine Sekunde, aber dann kommt es zurück. Nicht glatt überhaupt.
Vielen Dank für Ihre Hilfe.
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>
Sie zu beheben danken für die Zeit nehmen, den Code mit dem Wechsel zu posten, damit ich es laufen konnte! Das hat den Trick gemacht! – PandaNinja