Stagger List Hover

<ul class="stagger-list">
  <li>Design System</li>
  <li>Components</li>
  <li>Tokens</li>
  <li>Documentation</li>
</ul>

.stagger-list {
  list-style: none;
  width: 200px;
}
.stagger-list li {
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 500;
  color: #999;
  border-radius: 8px;
  cursor: pointer;
  transition: all .2s ease;
  transition-delay: calc(var(--i, 0) * 30ms);
}
.stagger-list:hover li {
  color: #ccc;
}
.stagger-list li:hover {
  color: #1a1a1a;
  background: #f5f5f5;
}
.stagger-list li:nth-child(1) { --i: 0; }
.stagger-list li:nth-child(2) { --i: 1; }
.stagger-list li:nth-child(3) { --i: 2; }
.stagger-list li:nth-child(4) { --i: 3; }