JSFiddle - React, Tailwind, and code Playground

by onury

HTML

<div id="parent">
  <!-- control should come before the target -->
  <button id="control">Hover Me!</button>
  <div id="target">I'm hovered too!</div>
</div>

CSS

#parent {
  position: relative;
  background-color: #eee;
  height: 100px;
  width: 300px;
}

#control {
  position: absolute;
  bottom: 0;
}

#control:hover ~ #target {
  background: red;
}

#target {
  border: 1px solid maroon;
  text-align: center;
}