How to assign a CSS class to an element on hover and remove it after a while?

Question

css

Surely there is a beautiful way in a couple of lines of code to assign an element (div block, for example) some kind of class when the mouse is hovered over it. And after a while - remove these classes from him. Tell me how to do it.
Now I did it through hover and if you remove the mouse before the end of the animation, then it doesn’t reach the end, it doesn’t fit.

Answer 1

Well, since you’ve been given examples in pure CSS, I’ll give you mine in jQuery:

var boxTimer = null,
    $box = $('#box');
$box.hover(
    function() {
        clearTimeout(boxTimer);
        $box.addClass('active');
    },
    function() {
        boxTimer = setTimeout(function() {
            $box.removeClass('active');
        }, 2000);
    }
);

jsfiddle.net/hnBvD

Answer 2

I will add to the @Anonym option :
jsfiddle.net/iiil/hnBvD/1
The fact is that it is not entirely clear from the task when the countdown should start: when you hover over the element (like mine), or after the cursor is removed from element, like @Anonym . That is, in my version, the class disappears 2 seconds after hovering, and in the @Anonym version , 2 seconds after the cursor leaves the element area.