ホバリングでの遅延画像表示

Question

特定の要素に1秒以上ホバーした後に画像を表示したい。

私はSOの古い投稿を見てきましたが、イメージを表示することに関して何も見つかりませんでした。

は今、ここに私はCSSで持っているものの例です：

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

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

} 

私は内容ではないので、私はそれが動作しないことをかなり確信しているが、遷移遅延などを追加しようとしましたアニメーション可能なプロパティ。

私は不透明度を使用すると効果があると思うが、ユーザーが移動するまで画像をレンダリングしないようにしたい。

背景画像を使用しようとしましたが、何か問題が発生しました。 場合によっては、カーソルが消えてホバー状態を失うと思われるものが原因で、カーソルが点滅します。

Answer 1

transitionを使用すると、opacityプロパティを使用して画像を非表示および表示できます。transition-delayは、不透明度の変更を遅延させるために使用されます。

この例では、pointer-events: noneが疑似要素に配置されているため、リンク自体が表示されたときにのみ表示されます。ここで

は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>