JSFiddle - React, Tailwind, and code Playground

HTML

<div id="a" style="width:200px; height: 100px; background:#555555">
</div>
<div id="1" style="position:relative; top:-100px; width:250px; height: 150px; background: rgba(0, 120, 255, 0.2)">
</div>

JavaScript

$('#1').mouseenter(function() {
    $(this).css('background','rgba(0, 120, 255, 0.3)');
});
$('#a').mouseenter(function() {
   $(this).css('background', 'red');
});
$('#1').mouseleave(function() {
    $(this).css('background','rgba(0, 120, 255, 0.2)');
});
$('#a').mouseleave(function() {
   $(this).css('background', '#555555');
});