JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

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

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

      #con1:hover ~#con2{
        visibility:hidden;
      }

      #wrapper:hover #con1:not(:hover){
        visibility:hidden;
      }