Hover state is maintained during a transition even if the element has gone

Question

Consider a simple element, and its associated CSS:

Hover me !

Answer 1

It's a solution to use JavaScript and a class to indicate the status. In your case, you could use mouseover event to toggle a class like this:

$('#content').on('mouseover', function() {
    $(this).toggleClass('down');
});

CSS

#content.down  {
    background-color: deepskyblue;
    transform:translateY(300px);
    -webkit-transform: translateY(300px);
}

jsFiddle

The other solution is to use a wrapper as hover block

    

        
Hover me !
    

CSS

#wrapper:hover #content  {
    background-color: deepskyblue;
    transform:translateY(300px);
    -webkit-transform: translateY(300px);
}

jsFiddle

Notice, this two solutions have different behaviors for different requirements.