Verzögerung der Bildanzeige beim Schweben

Question

Ich möchte, dass ein Bild angezeigt wird, nachdem ich für eine Sekunde über ein bestimmtes Element geklickt habe.

Ich habe alte Posts auf SO durchgesehen, aber habe nichts gefunden, was das Anzeigen eines Bildes angeht - nur das Ändern.

Gerade jetzt, hier ist ein Beispiel dessen, was ich in CSS haben:

a.type1, 
a.type2{ 
    position: relative; 
} 

a.type1:hover:after, 
a.type2:hover:after{ 
    content: url(imageurlgoeshere); 
    position: absolute; 
    z-index: 3; 

} 

Ich habe versucht, Hinzufügen von Übergangsverzögerung und andere aber ich ziemlich sicher bin, dass es nicht, weil funktioniert Inhalt nicht ist eine animierbare Eigenschaft

Während ich denke, dass die Verwendung von Opazität funktioniert, möchte ich nicht, dass das Bild gerendert wird, bis der Benutzer schwebt.

Ich habe versucht, Hintergrund-Bild, aber ich lief in einige Schwierigkeiten. In einigen Fällen flackert der Cursor aufgrund dessen, was ich annehmen kann, dass das Element verschwindet und seinen Schwebezustand verliert.

Answer 1

Sie können transition verwenden, um Bilder unter Verwendung der opacity-Eigenschaft auszublenden und anzuzeigen, wobei transition-delay verwendet wird, um die Änderung der Deckkraft zu verzögern.

In diesem Beispiel wird pointer-events: none auf die Pseudo-Elemente platziert, so dass sie nur angezeigt werden, wenn die Links selbst schweben. Hier

ist ein updated fiddle:

a.type1, 
 
a.type2 { 
 
    position: relative; 
 
} 
 
a.type1:after, 
 
a.type2:after { 
 
    position: absolute; 
 
    content: url(http://i.stack.imgur.com/rG8mD.png); 
 
    transition: opacity 2s; 
 
    opacity: 0; 
 
    pointer-events: none; 
 
} 
 
a.type1:hover:after, 
 
a.type2:hover:after { 
 
    opacity: 1; 
 
    transition-delay: 1s; 
 
}

<a class="type1">Type One</a> 
 
<br /> 
 
<a class="type2">Type Two</a>