将.hover选择器与向上键和向下键混合使用

.element:hover {
  /* 悬停时的样式 */
}

<ul>
  <li class="item">Item 1</li>
  <li class="item">Item 2</li>
  <li class="item">Item 3</li>
</ul>

<style>
.item:hover {
  background-color: yellow;
}
</style>

<script>
const items = document.querySelectorAll('.item');
let currentIndex = 0;

document.addEventListener('keydown', (event) => {
  if (event.key === 'ArrowUp') {
    currentIndex = (currentIndex - 1 + items.length) % items.length;
  } else if (event.key === 'ArrowDown') {
    currentIndex = (currentIndex + 1) % items.length;
  }

  items.forEach((item, index) => {
    if (index === currentIndex) {
      item.classList.add('hover');
    } else {
      item.classList.remove('hover');
    }
  });
});
</script>