JSFiddle - React, Tailwind, and code Playground

HTML

<div id="con1"></div>
<div id="con2"></div>

CSS

#con1 {
     float: left;
     width: 500px;
     height: 300px;
     background: #f00;
 }
 #con2 {
     float:left;
     width: 500px;
     height: 300px;
     background: #808;
 }

JavaScript

var con1 = document.getElementById('con1');
    var con2 = document.getElementById('con2');
    
    
    function displayElem(el, property, value){
        el.style[property] = value;
    }
    
    con1.onmouseover = displayElem.bind(null, con2, 'display', "none");
    con1.onmouseout = displayElem.bind(null, con2, 'display', "");
    con2.onmouseover = displayElem.bind(null, con1, 'visibility', "hidden");
    con2.onmouseout = displayElem.bind(null, con1, 'visibility', "");