JSFiddle - React, Tailwind, and code Playground

HTML

<html>
  <body>
    <div class="parent">
      Hello
      <div class="child1"></div>
      <div class="child2"></div>
    </div>
  </body>
</html>

CSS

.parent {
   width:300px;
   height:300px;
   background-color:yellow;
   display:flex;
}

.parent:hover > .child1 {
  display:block;
}

.parent:hover > .child2 {
  display:none;
}

.child1 {
  display:none;
  width: 100px;
  height:100px;
  background-color: green;
}

.child2 {
  display:block;
  width: 100px;
  height:100px;
  background-color: blue;
}