JSFiddle - React, Tailwind, and code Playground

by SpaceDog

HTML

<div class="myDiv">
    <span class="myText">some text</span>    
</div>

CSS

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

JavaScript

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

function mouseOut() {
    $(this).data('mouseIn', false);
    $(this).removeClass('outline'); 
}

$('.myDiv').hover(mouseIn, mouseOut);
$('.myText').hover(mouseIn, mouseOut);

$('.myDiv, .myText').mousemove(function(){
    if ($('.myDiv').data('mouseIn')) {
        // Mouse is in the div
        if ($('.myText').data('mouseIn')) {
            // Mouse is in the span
            $('.myDiv').removeClass('outline');
            $('.myText').addClass('outline');
        } else {
            // In the div but not the span
            $('.myDiv').addClass('outline');
            $('.myText').removeClass('outline');            
        }
    } 
    // No else as the span is contained in the div, otherwise the 
    // else clause would mean mouse is in the span. Since this is 
    // only called when it's inside one or other (or both) 
});