JSFiddle - React, Tailwind, and code Playground

HTML

<div class="test">
    <div>Test1</div>
    <span>Test2</span>
    <ul>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
    </ul>
    <h1>Headline</h1>
</div>

CSS

.is_hovered {
    border:1px solid red;
    
}

JavaScript

$('body *:visible').hover(function(e) {
    $(this).addClass('is_hovered');
    elem = $(this);
    //going over the highlighted items
    $('body *:visible').filter('.is_hovered').each(function(k,v) {
        if (elem.get(0) != v) {
            /* highlighted item is NOT the current item being hovered
            This means - it's a parent element, let's mark it (for when we get out of the child element),
            and unhighlight it */
            $(v).attr('child_highlighted',1);
            $(v).removeClass('is_hovered');
        }

    });
}, function(e) {
    $(this).removeClass('is_hovered');
    //if the target element (the element now being hovered) is parent, highlight it and remove the marking
    if ($(e.toElement).attr('child_highlighted')) {
        $(e.toElement).addClass('is_hovered');
        $(e.toElement).removeAttr('child_highlighted');
    }
    $(this).removeClass('is_hovered');
});