JSFiddle - React, Tailwind, and code Playground

HTML

<div id="gassi"><p>UNTERER DIV</p></div><div id="gassiover">Ich-beweg-mich-immer-noch-nicht-wie-ich-soll-DIV</div>

CSS

div#gassi {width:280px;height:94px;top:48px;left:0;position:absolute;border:1px solid black;background-color:green;}
div#gassiover {width:280px;height:94px;background-color:red;top:48px;left:0px;position:absolute;z-index:300;border:1px solid black;}

JavaScript

$(document).ready(function(){
    var gassibox = $("#gassiover");
    var gassiboxu = $("#gassi");
    var animationState = "";
    var timer = null;
    
    // Do hover in
    var hoverIn =  function(){
        if (animationState != "hoverin") {
            gassibox.stop().animate({"left": "300px"}, "slow");
            animationState = "hoverin";
        }
    };
    // Do hover out
    var hoverOut = function() {
        if (animationState != "hoverout") {
            gassibox.stop().animate({"left": "0"}, "slow");
            animationState = "hoverout";
        }         
    };
    
    // Register that the user has done something, but do not
    // execute at once the desired action
    var registerAction = function (wantedState) {
        clearTimeout(timer);
        if (wantedState == "hoverin") {
            timer =setTimeout(hoverIn, 100);
        }
        else {
            timer = setTimeout(hoverOut, 100);
        }
    }
    

            
    gassibox.hover(
    function(){
       registerAction("hoverin");
    },
    function() {
        registerAction("hoverout");     
    });
    gassiboxu.hover(
    function(){
       registerAction("hoverin");
    },
    function() {
        registerAction("hoverout"); 
    });

});