HTML & CSS - Hover state maintained after transition

Simple example for StackOverflow

HTML

<div id="container">
    <div id="content">Hover me !</div>
</div>

CSS

/** The problem **/
 #content.hover {
    background-color: deepskyblue;
    cursor: pointer;
    transform:translateY(300px);
    -webkit-transform: translateY(300px);
    transition: 1s 500ms;
    transition-property: transform, background-color;
}
/** Just for fun **/
 html, body {
    height: 100%;
    overflow: hidden;
}
#container {
    width: 80%;
    height: 80%;
    background: beige;
    border: 1px solid black;
    border-radius: 5px;
    margin: 10px auto;
    padding: 10px;
}
#content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    background: coral;
    border: 1px solid black;
    border-radius: 5px;
    margin: 10px auto;
    padding: 10px;
    transition: 1s 500ms;
    transition-property: transform, background-color;
}

JavaScript

//jQuery ismouseover  method
(function($){ 
    $.mlp = {x:0,y:0}; // Mouse Last Position
    function documentHandler(){
        var $current = this === document ? $(this) : $(this).contents();
        $current.mousemove(function(e){jQuery.mlp = {x:e.pageX,y:e.pageY}});
        $current.find("iframe").load(documentHandler);
    }
    $(documentHandler);
    $.fn.ismouseover = function(overThis) {  
        var result = false;
        this.eq(0).each(function() {  
                var $current = $(this).is("iframe") ? $(this).contents().find("body") : $(this);
                var offset = $current.offset();             
                result =    offset.left<=$.mlp.x && offset.left + $current.outerWidth() > $.mlp.x &&
                            offset.top<=$.mlp.y && offset.top + $current.outerHeight() > $.mlp.y;
        });  
        return result;
    };  
})(jQuery);

$(function () {
    
	var recheckPosition = function() {
        if($('#content').ismouseover() === true) {
            $('#content').addClass('hover');
        } else {
            $('#content').removeClass('hover');
        }
	};
    

	window.setInterval(function(){
		recheckPosition();
	}, 50);
});