JSFiddle - React, Tailwind, and code Playground

HTML

<div>
   <div class="div_gray" id="div_gray">
     <div class="div_blue" id="div_blue" 
    onmouseover="this.className='div_green'" 
    onmouseout="this.className='div_blue'" 
    ></div>
   </div>
</div>

CSS

.div_gray {
	width: 200px; height:120px; background-color:#CCCCCC; position:relative; left: 100px; top: 90px;
}
.div_blue, .div_green, .div_red {
	width: 140px; height:60px; position:relative; left:30px; top:30px; background-color: #0000FF;
}
.div_green {background-color: #00CC00;}
.div_red {background-color: #FF0000;}

JavaScript

function ChangeDivColor(elem) {
    document.getElementById("div_blue").className = 'div_red' ; //синий блок=красный
	//document.getelementbyid('div_gray').style.bgcolor='rgba(192,192,192,1)'; не работает
    document.getElementById("div_gray").style.visibility= 'hidden'; //прячем серый 
}
   
function RestoreColor(elem) {
    document.getElementById("div_blue").className = 'div_green' ; //синий снова зелёный
    document.getElementById("div_gray").style.visibility = 'visible'; //серый снова виден (не работает)
}

document.getElementById('div_blue').onmousedown = function(e){ // нажали на синий
    ChangeDivColor(this);
}
document.getElementById('div_blue').onmouseup = function(e){ //отжали мышку на синем
    RestoreColor(this);
}