如何处理鼠标悬停时元素颜色的变化？

在JavaScript中，你可以使用`mouseover`和`mouseout`事件来处理鼠标悬停时元素颜色的变化。这里有一个简单的例子：

<style>
  .hover-color {
    transition: background-color 0.5s ease;
  }
</style>

<div id="hoverElement" class="hover-color">鼠标悬停我变色</div>

<script>
  const hoverElement = document.getElementById('hoverElement');

  hoverElement.onmouseover = function() {
    this.style.backgroundColor = 'blue'; // 鼠标悬停时颜色变为蓝色
  };

  hoverElement.onmouseout = function() {
    this.style.backgroundColor = 'initial'; // 或者恢复到原始颜色，如果有的话
  };
</script>

在这个示例中，我们首先设置了`.hover-color`的CSS类，给背景色变化添加了平滑过渡效果。然后，我们为`#hoverElement`元素绑定了`mouseover`和`mouseout`事件，分别在鼠标悬停和离开时改变背景颜色。

如果你想要更复杂的交互，比如渐变、动画等，可以使用CSS或者结合JavaScript的`setInterval`来控制颜色变化过程。