JSFiddle - React, Tailwind, and code Playground

by Ken Watanabe

HTML

<div class="show" id="subject01">
    <h1>Subject 01</h1>
    <div class="targetDiv info01">
        <div class="topleft stayhovered">
            <b>Subject 01, topleft<br/><u>Maintain hover</u> until subject02 is hovered</b></div>
        <div class="topright">
            Subject 01, topright<br/>Fadeout when cursor hovers out</div>
        <div class="bottomleft stayhovered">
           <b>Subject 01, bottomleft<br/><u>Maintain hover</u> until subject02 is hovered</b></div>
        <div class="bottomright">
            Subject 01, bottomright<br/>Fadeout when cursor hovers out</div>
    </div> <!-- END | 01 target -->
</div> <!-- END | 01 show -->


<div class="show" id="subject02">
    <h1>Subject 02</h1>
    <div class="targetDiv info02">
        <div class="topleft">
             Subject 02, topleft<br/>Fadeout when cursor hovers out</div>
        <div class="topright stayhovered">
            <b>Subject 02, topright<br/><u>Maintain hover</u> until subject01 is hovered</b></div>
        <div class="bottomleft">
            Subject 02, bottomleft<br/>Fadeout when cursor hovers out</div>
        <div class="bottomright stayhovered">
            <b>Subject 02, bottomright<br/><u>Maintain hover</u> until subject01 is hovered</b></div>
    </div> <!-- END | 02 target -->
</div> <!-- END | 02 show -->

CSS

body {
  font-family: helvetica;
  font-size: 13px;
  background-color: #FAFAFA;
}

.topleft {
  top:2%;
  left:2%;
}

.topright {
  top:2%;
  right:2%;
}

.bottomleft {
  bottom:2%;
  left:2%;
}

.bottomright {
  bottom:2%;
  right:2%;
}


/* Subjects */

#subject01 {
  left: 30%;
  top: 30%;
  position: fixed;
  color: #FE5722;
}

#subject02 {
  right: 30%;
  bottom: 30%;
  position: fixed;
  color: #3F51B5;
}

.targetDiv {
  position:absolute;
  width:100%;
  visibility: hidden;
  opacity:0;
  -webkit-transition: all 250ms linear;
  -o-transition: all 250ms linear;
  transition: all 250ms linear;
}

.topleft, .topright, .bottomleft, .bottomright {
  position: fixed;
  opacity: 0;
  -webkit-transition: all 250ms linear;
  -o-transition: all 250ms linear;
  transition: all 250ms linear;
}

.stayhovered {
  opacity: 1;
}

h1:hover ~ div .topleft,
h1:hover ~ div .topright,
h1:hover ~ div .bottomleft,
h1:hover ~ div .bottomright
{
  visibility: visible;
  opacity: 1;
}

.show:hover .targetDiv {
  visibility: visible;
  position: fixed;
  left: 0px;
  top: 0px;
  height: 100%;
  opacity: 1;
  z-index: -1;
}

.show:hover {
  z-index: 0;
}

.show {
  z-index: 1;
}