JSFiddle - React, Tailwind, and code Playground

HTML

<div class="patient">
    <span>Hover on this and then unhover.</span>      
    <div>These</div>
    <div>Little</div>
    <div>Divs</div>
    <div>Don't</div>
    <div>Redraw</div>
    <div>After</div>
    <div>They</div>
    <div>Are</div>
    <div>Hidden</div>
</div>
<div style="float:right; width: 200px;">
The green divs are actually not "visible" (they are "display:none") after you unhover, though you can still see them. Note that you can't select them without re-hovering first, and if you select them before de-hovering, the selection will remain even after you select this text. To make the screen redraw them so that they go away, resize the window or the frame, or scroll.
</div>

CSS

.patient  {
    background: orange;
    overflow: hidden;
    height: 40px;
    position: absolute;
    z-index: 1;
}
.patient:hover {
    overflow:visible;
}
.patient > div {
    display: none;
    background: green;
    line-height: 16px;
    z-index: 1;
    position: relative;
}
.patient:hover > div {
    display: block;
}