JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<div class="one">DIV-1</div>
<div id="two">DIV-2</div>
<input type="text" value="INPUT-3" />

JavaScript

$(document).on('mouseenter mouseleave focusin focusout', '.one, #two, input[value="INPUT-3"]', function( e ) {
    
    var obj = $(this),
        objOne = obj.is('.one'),
        objTwo = obj.is('#two'),
        objThree = obj.is('input[value="INPUT-3"]');
 
    // - Mouseenter if obj is anything but the input.
    // - Focus only if obj is the input.
    if ( !objThree && e.type === 'mouseenter' || objThree && e.type === 'focusin'  ) {

        // Mouseenter
        // Focusin
        obj.css({ outline: '3px solid red' });
        
    }
    // - Mouseleave if obj is anything but the input.
    // - Focusout only if obj is the input.
    else if ( !objThree && e.type === 'mouseleave' || objThree && e.type === 'focusout' ) {
    
        // Mouseleave
        // Focusout
        obj.css({ outline: 'none' });
    
    }
    
    
});

$('<div class="one">DIV-One</div>').insertAfter('#two');