CSS :hover:延迟后

Question

我有这个CSS:

.edit:hover:after{
    content: '✐';
}

我希望用户在内容出现之前将光标放在 .edit class 上 2 秒。

我尝试过这种方法，但没有用：

.edit:hover{
    -webkit-transition: 2s all;   
    -webkit-transition-delay: 2s; 
    -moz-transition: 2s all;   
    -moz-transition-delay: 2s; 
    -ms-transition: .2s all;   
    -ms-transition-delay: 2s; 
    -o-transition: 2s all;   
    -o-transition-delay: 2s; 
    transition: 2s all;   
    transition-delay: 2s; 
}

还在 .edit:hover:after 和 .edit 上尝试了相同的代码。

html 是一个简单的 <td class='edit'> 元素。

只有 css 这可能吗？

Answer 1

您可以尝试将过渡放在您的之后：

.test:after {
  content: 'shown after 2 seconds';
  opacity:0;
  transition: 2s all;   
}

.test:hover:after {
  opacity:1;
  transition-delay: 2s; 
}

<div class="test">
  hover me for 2 seconds
</div>

CSS :hover:延迟后

CSS :hover:after Delay

html

css

hover

pseudo-element