HTML / CSS Bilder bei hover für 5 Sekunden anzeigen?
Wenn ich über Bild "A" Hover will ich, dass bild "B" für 5 Sekunden angezeigt wird und wieder verschwindet. Aber wenn Bild "B" für 5 Sekunden sichtbar ist soll man da drüber hovern und dann sieht man Bild "C" für 5 Sekunden :D Geht das irgendwie ? Wenn ja -> HOW?
4 Antworten
Nach langem Rumprobieren komme ich nun auf den Entschluss:
Ganz Fehlerfrei geht das Ganze nicht ohne Javascript. Hier ist meine Lösung. #a ist das Erste Bild, #b das zweit und #c das Dritte:
#b{
animation: leave 1.0s forwards;
animation-iteration-count: 1;
animation-delay: 1s;
}
#a:hover + #b{
animation: show 1.0s forwards;
animation-iteration-count: 1;
animation-delay: 1s;
position: relative;
}
#b:hover + #c{
animation: show 1.0s forwards;
animation-iteration-count: 1;
animation-delay: 1s;
position: relative;
}
#c{
animation: leave 1.0s forwards;
animation-iteration-count: 1;
animation-delay: 1s;
}
.box{
width: 100px;
height: 100px;
background-color: red;
}
@keyframes show {
0% {
opacity: 1;
}
100% {
opacity: 0;
left: -9999px;
}
}
@keyframes leave {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
leider treten aber ein Paar Bugs auf die einfach nicht zu beheben sind.
- Bilder zeigen sich am Anfang und verschwinden dann nach der gewünschten Zeit
- Bilder sind immernoch vorhanden und somit lösen Sie den Hover Effekt aus weil lediglich die Transparenz auf null gestellt wird.
Die Zeit kannst du einstellen indem du überall wo "animation-delay" steht deine gewünschte Zeit eingibst. Ich habs auf eine Sekunde gestellt.
Machs mit Javascript.
Bild A onmouseenter zeigt Bild B und startet einen Timer, Bild B on Mouseenter macht das selbe nur bei Bild C und deaktiviert den Timer bei Bild A.
Wenn alle Bilder in einem Div sind, kannst du mit onmouseleave auf diesem wieder den Ausgangszustand herstellen, wo nur Bild A gezeigt wird.
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onmouseenter
Es geht auch ohne JavaScript, wenn du einen div in einen div hast. Der äußere bekommt den ersten hover, der das ganze Ding sichtbar macht und der zweite darin, der genauso groß ist, bekommt ein delay. In einer animation sähe der delay z.B. so aus: animation: .4s 5s name;
Dadurch wird zwar der große Container trotzdem sichtbar sein, aber da sämtlicher Content darin unsichtbar wird, sieht man ihn nicht. Nur den Platz, den er einnimmt.
Hier brauchst du solche Fragen nicht zu stellen.
Ich helfe mir seit 20 Jahren mit SELFHTML:
Manche Menschen, vor Allem Anfänger, wissen zwar wo, aber nicht wonach Sie suchen müssen um ein bestimmt Problem zu lösen. GF ist daher ein super Ort um solche Fragen zu stellen.