JSFiddle - React, Tailwind, and code Playground

HTML

<p>
    <a>HOVER <span>child</span></a>
    <span>immediate sibling</span>
    <span>general sibling</span>
</p>

CSS

p { font-size:20px; margin:20px; cursor:default; }
a { color:blue; border:3px solid blue; }
span { background:#ccc; }

a:hover + span { background:yellow; }
a:hover > span { background:yellow; }
a:hover ~ span { background:yellow; }