JavaScript 如何在鼠标移动上更改div的背景色

通过使用HTML、CSS和JavaScript可以轻松地更改div框的背景色。我们将使用querySelector()和addEventListener()方法来选择元素，然后应用一些数学逻辑来更改其背景色。下面的章节将指导您如何创建这种效果。

HTML代码： 在这个部分，我们将创建一个基本的body结构。body部分包含一个<div>元素，当鼠标移动到div元素上时，其背景色将会改变。

示例： 在这个示例中，我们将看到鼠标移动过程中背景色的改变。

<!DOCTYPE html>
<html lang="en" dir="ltr">
 
<head>
    <meta charset="utf-8">
    <title>
        How to Change Background Color
        of a Div on Mouse Move Over
        using JavaScript ?
    </title>
</head>
 
<body>
    <div class="first"></div>
</body>
 
</html>

CSS代码： 在这个部分，我们将使用一些CSS属性来给div元素添加样式。

.first {
    position: absolute;
    background: #E73C49;
    width: 300px;
    height: 250px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

JavaScript代码：

第一步： 第一步是创建一个包含不同颜色的数组。

第二步： 第二步是使用 querySelector() 方法选择div元素，然后使用 addEvenListener() 方法将事件处理程序（mouseover）附加到它。

第三步： 在最后一步，我们将使用一些逻辑来设置div元素的背景，即我们将使用 Math.random() 函数在数组范围内返回一个浮点数，然后使用 Math.floor() 方法向下舍入浮点数到最近的整数。

var color = [, "#3C9EE7", "#E7993C",
            "#E73C99", "#3CE746", "#E7993C"];
 
document.querySelector("div").addEventListener(
    "mouseover", function () {
 
        document.querySelector("div").style.background
            = color[(Math.floor(Math.random() * color.length))];
    })

完整代码： 在本节中，我们将合并以上三个代码部分。

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <title>
        How to Change Background Color
        of a Div on Mouse Move Over
        using JavaScript ?
    </title>
 
    <style>
        .first {
            position: absolute;
            background: #E73C49;
            width: 300px;
            height: 250px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
 
<body>
    <div class="first"></div>
 
    <script type="text/javascript">
        var color = [, "#3C9EE7", "#E7993C",
            "#E73C99", "#3CE746", "#E7993C"];
 
        document.querySelector("div").addEventListener(
            "mouseover", function () {
 
                document.querySelector("div").style.background
                    = color[(Math.floor(Math.random() * color.length))];
            })
    </script>
</body>
 
</html>

输出：

JavaScript 如何在鼠标移动上更改div的背景色