如何使用 JavaScript 更改鼠标移动时 Div 的背景颜色？

若想在鼠标移动时更改某个 Div 的背景颜色，我们可以通过 JavaScript 来实现。下面我将为您介绍如何使用 JavaScript 来实现这一功能。

HTML 结构

首先，我们需要先准备一个 Div 元素，其 class 属性为 "color-change"，示例代码如下：

<div class="color-change"></div>

CSS 样式

然后，我们需要为该 Div 元素设置初始背景颜色，示例代码如下：

.color-change {
  background-color: #fff;
}

JavaScript 代码

最后，我们可以使用如下 JavaScript 代码来实现鼠标移动时更改该 Div 的背景颜色：

const div = document.querySelector('.color-change');

div.addEventListener('mousemove', function(e) {
  const x = e.clientX / window.innerWidth;
  const y = e.clientY / window.innerHeight;
  const color = `rgb(${x * 255}, ${y * 255}, 100)`;
  div.style.backgroundColor = color;
});

以上代码中，我们使用 addEventListener() 方法来监听 Div 元素上的 mousemove 事件。当鼠标在该 Div 上移动时，会触发回调函数，该函数中包含了获取鼠标在屏幕中的位置信息以及计算当前背景色所需的颜色值。

结束语

通过以上代码，我们成功地实现了在鼠标移动时更改 Div 的背景颜色的功能。希望这篇文章对您有所帮助！