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放置在伪元素上，以便它们仅在链接本身悬停时显示。

这是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>

悬停时延迟图像显示

1 个答案: