CODEWITHSUNDEEP
htmlcsshoverpseudo-element
ndelucca
ndelucca

Reputation: 547

CSS :hover:after Delay

I have this CSS:

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

I want the user to place the cursor on .edit class for 2 seconds before the content appears.

I've tried with this kind of aproach and doesn't work:

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

Also tried same code on .edit:hover:after and .edit.

The html is a simple <td class='edit'> element.

Is this possible with only css?

Upvotes: 2

Views: 8802

Answers (1)

Pete
Pete

Reputation: 58422

You can try to put the transition on your after instead:

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

Upvotes: 6

Related Questions