JSFiddle - React, Tailwind, and code Playground

HTML

<div id="cursor">|----------|<br/>|----------|<br/>>I'm a spaceship!><br/>|----------|<br/>|----------|<br/></div>
<div id="hi">Try to select this text</div>
<p>I want to automatically highlight all elements that the cursor element hovers over.</p>
<p>Here's an element.<p>

CSS

#hi {
    margin: 20px;
}

JavaScript

var ElementCursor = {
    cursorElement: "",
    setCursor: function (cursorId) {
        $('html').css({
            'cursor': 'none',
        });
        ElementCursor.cursorElement = cursorId;
        ElementCursor.updateCursor();
    },
    removeCursor: function () {
        $('html').css({
            'cursor': ''
        });
        ElementCursor.cursorElement = '';
    },
    updateCursor: function () {
        $(document).mousemove(function (e) {
            $('#' + ElementCursor.cursorElement).css({
                'position': 'fixed',
                    'top': e.pageY + 2 + 'px',
                    'left': e.pageX + 2 + 'px'
            });
        });
    }
};

ElementCursor.setCursor("cursor");