悬停时延迟图像显示

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;
}

我尝试添加过渡延迟和其他内容，但我相当确定它不起作用，因为内容不是可动画的属性。

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

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

Answer 1

您可以使用

transition通过 opacity 属性隐藏和显示图像，transition-delay用于延迟不透明度的变化。

在此示例中，pointer-events: none放置在伪元素上，以便它们仅在链接本身悬停时显示。

这是一个更新的小提琴：

a.type1,
a.type2 {
  position: relative;
}
a.type1:after,
a.type2:after {
  position: absolute;
  content: url(https://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>