JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>

<div class="element_hover highlighted"></div>

<div>Outter

    <div>inner1</div>
    <div>inner2</div>
    
</div>

CSS

.highlighted {
        border: 2px solid #FF0000;
        background-color:rgba(255,0,0,0.5);
    }

    .element_hover {
        position: absolute;
        top: 0;
        left: 0;
        height: 10px;
        width: 100px;
        
        display: block;
        padding: 0px;
    }

JavaScript

function OnMouseOver(evt)
    {
        var element = $(evt.target);
        
        var offset = element.offset();
        var height = element.outerHeight();
        var width = element.outerWidth();
        //$('.element_hover').css({'top': offset.top, 'left': offset.left, 'height': height, 'width': width});
        $('.highlighted').removeClass('highlighted');
        element.addClass('highlighted');
    }

    function OnMouseOut(evt)
    {
        var element = $(evt.target);
        
        $('.element_hover').css({'top': 0, 'left': 0, 'height': 0, 'width': 0})
    }

    function OnClick(evt)
    {
        var element = evt.target;
        $(element);
        
        return false;
    }

    document.addEventListener("mouseover", OnMouseOver, true);
    document.addEventListener("mouseout", OnMouseOut, true);
    document.addEventListener("click", OnClick, true);