JSFiddle - React, Tailwind, and code Playground

HTML

<div id="con-wrapper">  
    <div id="con1">
    </div>
    <div id="con2">
    </div>
    <div id="con3">
    </div>    
</div>

CSS

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

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

      #con3{
        float:left;
        width: 500px;
        height: 300px;
        background: #606;
      }

      #con-wrapper:hover > div[id^=con]:not(:hover) {
         visibility: hidden;
      }