2

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?

ndelucca
  • 517
  • 1
  • 8
  • 20

1 Answers1

6

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>
Pete
  • 57,112
  • 28
  • 117
  • 166
  • Nice solution, it works very well. I had to add :before{content:"✐";opacity:0;} for it to center properly, but i can live with that. Tomorrow i'll mark this as the correct answer – ndelucca Jan 05 '18 at 17:12
  • Your code also gives a 2 seconds delay before the text vanishes. Is there a way to remove that delay? – Guillaume F. Feb 19 '20 at 08:29
  • @GuillaumeF. there is no delay before the fade out - it happens as soon as you remove your mouse - try reducing the length of the transition if you want to speed it up – Pete Feb 19 '20 at 09:05