html - 悬停时延迟图像显示

Question

我希望在将鼠标悬停在特定元素上一秒钟后显示图像。

我查看了 SO 上的旧帖子，但没有发现任何关于显示图像的信息 - 只是修改它。

现在，这是我在 CSS 中拥有的示例:

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

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

}

我试过添加 transition-delay 和其他方法，但是我很确定它不起作用，因为内容不是可动画的属性。

虽然我认为使用不透明度可能有效，但我不希望在用户悬停之前呈现图像。

我试过使用背景图片，但遇到了一些麻烦。 在某些情况下，由于我可以假设元素消失并失去其悬停状态，光标会闪烁。

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>