JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="container">
        <div id="field"></div>
    </div> <span id="mouseHover"></span>

</body>

CSS

* {
    box-sizing: border-box;
}
#container {
    position: relative;
    border: 1px solid black;
    width: 300px;
    height: 300px;
}
#field {
    position: absolute;
    left: 50px;
    top: 50px;
    border: 1px solid black;
    height: 200px;
    width: 200px;
    cursor: none;
}
#mouseHover {
    position: absolute;
    border: 1px solid black;
    width: 30px;
    height: 30px;
    display: none;
    pointer-events: none;
}

JavaScript

$("#field").on({
        mousemove: function (e) {
            var left = parseInt($("#container").css("left")) || 0;
            var top = parseInt($("#container").css("top")) || 0;
            var newX = e.pageX - left - parseInt($("#mouseHover").css("width")) / 2;
            var newY = e.pageY - top - parseInt($("#mouseHover").css("height")) / 2;
            $("#mouseHover").css({
                left: newX,
                top: newY
            });
            console.log("MMove");
        },
        mouseenter: function (e) {
            $("#mouseHover").show();
            console.log("MEnter");
        },
        mouseleave: function (e) {
            $("#mouseHover").hide();;
            console.log("MLeave");
        }
    });