JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box"></div>
<div id="flag"></div>

CSS

#box {
    width:100px;
    height:100px;
    border:1px solid black;
    float:left;
 }
#box:hover{
    background-color:orange;
}
#flag {
    width:30px;
    height:30px;
    border:1px solid black;
    float:left;
    margin-left:30px;
}
#box.hoverBlack:hover {
    background-color:black;
}

JavaScript

$(function(){
    var flag=false;
    $('#flag').click( function() {
        if(!flag) {
            $('#flag').css('background-color', 'red');
            $('#box').addClass('hoverBlack');
            flag = true;
        }
        else {
            $('#flag').css('background-color', 'white');
            $('#box').removeClass('hoverBlack');
            flag=false;
        }
    })
});