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

$('.myDiv, myText').hover(                  
   function() {
       $(this).mouseIn = true;
   }, 
    
   function() {
       $(this).mouseIn = false;
   }
);

$('.myDiv, .myText').mousemove(function(){
    if ($('.myDiv').mouseIn) {
        // Mouse is in the div
        if ($('.myText').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 need for an else if the span is entirely in the div
});