JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li id="uno">1</li>
  <li id="dos">2</li>
  <li id="tres">3</li>
  <li id="cuatro"></li>
</ul>

CSS

ul{
  position: relative;
}
li{
  list-style: none;
  float: left;
  width: 2px;
  height: 20px;
  background: white;
  color: black;
  font-family: sans-serif;
  transition: .3s;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}
#cuatro{
  position: absolute;
  top: 60px;
  left: 20px;
  border: 1px solid red;
}
#uno:hover ~ #cuatro {
  background: red;
}
#dos:hover ~ #cuatro {
  background: green;
}
#tres:hover ~ #cuatro {
  background: blue;
}