JSFiddle - React, Tailwind, and code Playground

by vijayweb

HTML

<div id="divStatus">
    <div id="btnStatus"></div>
</div>

CSS

#divStatus {
    width: 200px;
    height: 200px;
    position: relative;
    margin: auto;
    background: rgba(0,0,0,1);
}

#btnStatus {
    display: none;
    width: 100px;
    height: 100px;
    top: 50px;
    position: relative;
    margin: auto;
    background: yellow;
    z-index: 9999;
    opacity: 1;
}

JavaScript

$("#divStatus").mouseover(function () {
     $("#divStatus").css("background", "rgba(0,0,0,.1)");
  
});

$("#divStatus").mouseleave(function () {
     $("#divStatus").css("background", "rgba(0,0,0,1)");

});