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

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

HTML 代码：在本节中，我们将创建主体的基本结构。 body 部分包含一个

元素，当鼠标移动到 div 元素上时，该元素的背景颜色会改变。

CSS 代码：在本节中，我们将使用一些 CSS 属性来设置 div 元素的样式。

Javascript代码：
步骤 1：第一步是创建一个由不同颜色组成的数组。

步骤 2：第二步是使用querySelector()方法选择 div 元素，然后使用addEvenListener()方法为其附加事件处理程序(鼠标悬停)。

第 3 步：在最后一步中，我们将使用一些逻辑设置 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)];
    })

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

  

    
    
        How to Change Background Color
        of a Div on Mouse Move Over
        using JavaScript ?
    
  
    
        .first {
            position: absolute;
            background: #E73C49;
            width: 300px;
            height: 250px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    

  

    
  
    
        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)];
        })
    

  

输出：