在JavaScript代码中，鼠标移动事件被用来改变HTML元素的背景颜色。我们还想在把鼠标从元素上移开后把颜色恢复为蓝色。因此，我们也使用了mouseout事件。这将在我们把鼠标指针从元素上移开时发生。

getElementById()产生一个element对象，代表id属性与提供的字符串相匹配的元素。因为如果提供的元素ID必须是唯一的，它们是快速检索单个元素的方便方法。

addEventListener()函数被用来将事件处理程序与一个特定的元素联系起来。它对当前的事件处理程序没有影响。事件被认为是JavaScript的一个必要组成部分。一个网页对已经发生的事件作出回应。事件可以由用户或通过API产生。一个事件监听器是一个等待事件发生的JavaScript进程。addEventListener()方法是一个JavaScript构造函数。我们可以在一个元素上添加许多事件处理程序，而不会覆盖当前的事件处理程序。

style.backgroundColor属性用于改变元素的颜色，它返回代表背景颜色的字符串值。这些背景属性的默认值是透明的。

Document.querySelectorAll()、getElementById()和Document.querySelector()只能在全局文档对象中访问。为了给网页添加功能，我们使用了JavaScript代码。在这个案例中，我们利用了带有 “id “参数的箭头函数。我们还可以使用CSS代码来修改背景颜色。这些方法都很容易使用，我们用一个样式的例子来展示所有的代码。

The following is the syntax for the background color property −

getElementById – 用于读取和编辑特定的HTML元素。

color – 用于定义显示的颜色。

在这些例子中，我们将看到如何使用JavaScript来改变一个Div的背景颜色。

Move the mouse over the below DIV to change the background color

正如我们在例子中看到的，这里我们使用了addEventListener()、mouseover和mouseout事件。如果你在浏览器中执行整个代码，你会看到蓝色的方块。然而，如果你把鼠标指针放在该元素上，颜色会变成粉红色。当你把鼠标指针从该元素上移开时，背景颜色就会恢复为紫色。

让我们看看另一个例子，通过使用querySelector()、addEventListener()和JavaScript的style.background属性，在鼠标移过时改变Div的背景颜色。

Move the mouse over the below DIV to change the background color

div框的背景颜色可以随时用HTML、CSS和JavaScript来修改。为了挑选元素，我们将使用querySelector()和addEventListener()方法。

document.querySelector()返回文档中与提供的选择器或一组选择器相匹配的第一个元素。当JavaScript在文档中匹配一个给定的元素时，它会在HTML元素中找到其应用。如果没有发现匹配，则默认返回null。

在第1步中，我们将为一个数组构造不同的颜色。

第2步是使用querySelector()函数挑选div元素，然后用addEvenListener()方法给它添加一个事件处理程序（鼠标移动）。

在这篇文章中，我们已经成功地解释了如何使用JavaScript在鼠标移过时改变Div的背景颜色，并举了一些例子。我们使用了两个不同的例子，在第一个例子中，我们使用了addEventListener，mouseover和mouseout事件，以及style.backgroundColor属性。在第二个例子中，我们使用了addEventListener、querySelector和style.background属性来改变一个Div的背景颜色。