JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/jquery-ui-git.css">
<div id="testarea">
    <div class='hoverable'>Div 1: <input type="text" disabled></div>
    <div class='hoverable'>Div 2: <input type="text" disabled>
</div>

Hovering over "Div 1" and "Div 2" works, but not over the disabled input controls.

CSS

div {
    border: 1px transparent solid;
}

div.hover {
    border: 1px blue solid;
}

JavaScript

$(document).on('mouseenter', 'div.hoverable', function() {
    $(this).addClass('hover');
});

$(document).on('mouseleave', 'div.hoverable', function() {
    $(this).removeClass('hover');
});