HTML / CSS Bilder bei hover für 5 Sekunden anzeigen?

...komplette Frage anzeigen

3 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.

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.

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

Was möchtest Du wissen?