JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <head>
    </head>
    
    <body>
        <div id="blurry">
            Hover over me, then over something else!
            <form>
                <input type="text" id="testbox11" value="one" />
                <input type="text" value="two" />
            </form>
        </div>
        <div id="console">
            <h2>Console</h2>
        </div>
    </body>
</html

CSS

#blurry {
    width: 150px;
    height: 150px;
    background: cyan;
}

div {
    border: 1px solid black;
}

#console {
    background: #DDF;
}

#console h2 {
    font-size: 1.5em;
}

JavaScript

$(function() {
    
    $("#blurry").hover(function() {
        log("Hover In!");
    }, function(){
        log("Hover Out!");
    });
    
    $("#testbox11").blur(function() {
        log("Hover In of text!");
    }, function(){
        log("Hover Out of text!");
    });
       
});

function log(msg) {
    $("#console").append("<pre>" + msg + "</pre");
}