JSFiddle - React, Tailwind, and code Playground

HTML

<div id="tc">
  <span id="ct">top</span>
  <div id="pc">
    <span id="st"></span>
    <span id="tp">center</span>
  </div>
  <span id="tt">bottom</span>
</div>

CSS

#pc:hover ~ #tt { display: none!important; }
#ct + #pc:hover { display: none!important; }