JSFiddle - React, Tailwind, and code Playground

HTML

<span>before page div span element</span>

<br/>
<hr/>
<div class="page">
    <div> <span>inside pade div span element </span>

        <p>wjhjhewh</p>
    </div>
</div>

CSS

.page {
            height:100%;
            width:100%;
            /*background:rgba(12, 132, 49, 0.3);*/
        }
        div {
            height:200px;
            width:250px;
            /*background:pink;*/
        }
        span {
            /*background-color:cyan;*/
        }
        span:hover, span.jsHover {
            background-color:blue;
            color:white;
            font-weight:bold;
        }
        .activeElement {
            background:#bfbfbf;
        }

JavaScript

$(document).ready(function () {
            var hoveredElement;
            var clickedElement;
            $(document).mousemove(function (event) {
                hoveredElement=event.target.nodeName;
                // comment this section in between to see issue
                $(hoveredElement).mouseenter(function () {
                    $(this).addClass('jsHover');
                }).mouseleave(function () {
                    $(this).removeClass('jsHover');
                });
                // comment above this part
                
                //console.log('hovered element now: ', hoveredElement);
                return hoveredElement;
            });
            $(document).click(function (event) {
                clickedElement = event.target.nodeName;
                //console.log('clicked element now: ', clickedElement);
                return clickedElement;
            });
            /* Uncomment this to check
            $(document).mousemove(function () {
                console.clear();
                console.log('hovered element now: '+hoveredElement+ ' -- & -- '+'clicked element now: '+ clickedElement);                
            });
            */
        });