JSFiddle - React, Tailwind, and code Playground

HTML

<div id="parent">
   
    
    <span id="light">Hover your mouse here</span>
     <p  id="popbefore">Things that come before don't work</p>   
     <p class="def" id="popbefore">Things that come before don't work</p>
    <p class="def" id="popper">To do things here</p>
</div>

CSS

/*read: "when user hovers over #light
set display to inline-block for #popper directly inside of #definitions.*/


 #light:hover + .def {
    background:#0f0;
}