JSFiddle - React, Tailwind, and code Playground

HTML

<li><a class="hoverbox"></a><h1 class="ttl">Result 1</h1></li>
<li><a class="hoverbox"></a><h1 class="ttl">Result 2</h1></li>
<li><a class="hoverbox"></a><h1 class="ttl">Result 3</h1></li>

CSS

.hoverbox{
position:absolute;
z-index:999;
width:100%;
height:100%;
}
li{width:100px;height:100px;position:relative;}

li:hover > .ttl {
  color:red;
}