JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-2.1.1.js"></script>

<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

$("#con1").hover(function(){
  $("#con2").css("visibility","hidden");
    
  },function(){
  $("#con2").css("visibility","visible");
});
$("#con2").hover(function(){
  $("#con1").css("visibility","hidden");
    
  },function(){
  $("#con1").css("visibility","visible");
});