JSFiddle - React, Tailwind, and code Playground
HTML
<div class="red-circle"></div>
<div class="blue-square"></div>
CSS
.red-circle {
height: 200px;
width: 200px;
border-radius: 50%;
background: red;
position: absolute;
bottom: 25px;
right: 25px;
}
.blue-square {
height: 50px;
width: 50px;
background: blue;
position: absolute;
bottom: 25px;
left: 25px;
}
JavaScript
$('.red-circle').mouseenter(function() {
$('.blue-square').fadeOut();
});
$('.red-circle').mouseleave(function() {
$('.blue-square').fadeIn();
});