JSFiddle - React, Tailwind, and code Playground

HTML

<div class='container'>
    <div class="raiseable">
       <span class="raiseable">some text</span>   
       <span class="raiseable padded">
           <span class="raiseable">some other text</span>    
       </span>
    </div>
</div>

CSS

.outline {
    outline: 5px solid #66ff66;
}

.padded {
    padding: 20px;
    margin: 20px;
}

JavaScript

function mouseIn() {
    $(this).data('mouseIn', true);
    $(this).addClass('hasMouse');
}

function mouseOut() {
    $(this).removeClass('hasMouse');
    $(this).data('mouseIn', false);
    // Still need to remove the outline class as 
    // mousemove may not be triggered outside the elements
    $(this).removeClass('outline');
}

$('.raiseable').hover(mouseIn, mouseOut);

$('.container').mousemove(function(){
    
    var best = null;
    $('.raiseable').each( function() { 
        
        if (($(this).children('.hasMouse').length == 0) && 
            ($(this).data('mouseIn'))) { 
            best = $(this);
        } else {
            $(this).removeClass('outline');
        }
    });
    if (best) {
        $(best).addClass('outline');
    }                         
});