<div class="box"></div>
<div class="box simple"></div>
.box {
  background: hsl(calc(var(--hue, 0) * 1deg), 100%, 50%);
  height: 200px;
  transition: all 0.5s linear;
}

.box:hover {
  --hue: 180;
}

.simple {
  background: #FF0000;
}

.simple:hover {
  background: #00FFFF;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.