Background color on hover

by Josh Krauth-Harding

HTML

<div>
  <p id="green">Green</p>
  <div id="green-bg" class="bg"></div>
  <p id="orange">Orange</p>
  <div id="orange-bg" class="bg"></div>
  <p id="yellow">Yellow</p>
  <div id="yellow-bg" class="bg"></div>
</div>

CSS

#green, #yellow, #orange {
  display: inline-block;
  cursor: default;
}

.bg {
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  opacity: 0;
}

#green-bg {
  background-color: green;
}

#green:hover ~ #green-bg {
  opacity: 1;
}

#orange-bg {
  background-color: orange;
}

#orange:hover ~ #orange-bg {
  opacity: 1;
}

#yellow-bg {
  background-color: yellow;
}

#yellow:hover ~ #yellow-bg {
  opacity: 1;
}