JSFiddle - React, Tailwind, and code Playground

HTML

<div class="a">
  <div class="overlap"></div>
  <div class="b">
    b
  </div>
  <div class="c">
    c
  </div>
</div>

CSS

.a {
  position: relative;
}

.b {
  width: 40px;
  height: 40px;
  top: 5px;
  left: 5px;
  position: absolute;
  background-color: blue;
}

.b:hover {
  background-color: white;
}


.c {
  width: 40px;
  height: 40px;
  top: 25px;
  left: 25px;
  position: absolute;
  background-color:red;
}

.c:hover {
  background-color: white;
}

.overlap {
  position: absolute;
  
  top: 25px;
  left: 25px;
  
  /* w = leftOfC - leftOfB
     h = topOfC - topOfB*/
  width: calc(25px - 5px);
  height: calc(25px - 5px);
  
  background-color: none;
  z-index: 2;
}

/* select .b and .c as siblings of the overlap div */
.overlap:hover ~ .b, .overlap:hover ~ .c {
  background-color: white;
}