Javascript 将鼠标悬停到特定块（div）[工作]时，尝试更改节的背景

当我将鼠标悬停在块（div）上时，整个要更改的部分的背景，总共要更改4个卡片和4个图像

区块（div）的等级为seo-program-01、seo-program-02、seo-program-03、seo-program-04， 该部分的类别为seo程序部分（BG将被更改）

下面是代码（已修复，代码对我很好）

控制台错误：

Uncaught TypeError: document.getElementByClassName is not a function
    at HTMLHeadingElement.<anonymous> ((index):1403)

未捕获类型错误：document.getElementByClassName不是函数
在HTMLHeadingElement。（（索引）：1403）

您似乎有两个简单的打字错误

document.getElementsByClassName("seo-program-01")[0].addEventListener("mouseover", function() {
    document.getElementByClassName("seo-programs-section")[0].style.backgroundImage = "url(https://website.com/wp-content/uploads/2021/03/seo-program-success-analytics-slider-home.png)";
                      ^^
}, false);

document.getElementsByClassName("seo-program-02")[0].addEventListener("mouseover", function() {
    document.getElementByClassName("seo-programs-section").style.backgroundImage = "url(https://website.com/wp-content/uploads/2021/03/optimized-press-release-services-slider-home.png)";
                      ^^
}, false);

您试图调用的方法被称为getElementsByClassName，在单词元素后面有一个S，但是您已经在事件函数中编写了两次getElementByClassName

下一次，当一段JavaScript代码无法按预期方式工作时，请尝试查看浏览器的控制台日志

在这种情况下，您会看到类似的错误

Uncaught TypeError: document.getElementByClassName is not a function
at HTMLDivElement.<anonymous>

未捕获类型错误：document.getElementByClassName不是函数
在HTMLDEVELENT。

作为额外说明；如果您希望仅当鼠标悬停在元素上时背景才可见[当鼠标悬停在元素上时背景恢复为正常]，并且根据您的HTML结构，您可以通过一些简单的CSS完成上述操作。

尝试以下操作：

JS-

css:

---

控制台中是否存在任何错误？控制台会告诉您错误所在：

getElementByClassName

不存在，它是

getElementsByClassName

（注意s）。

Uncaught TypeError: document.getElementByClassName is not a function
at HTMLDivElement.<anonymous>

var firstelemnt = document.querySelector('.seo-program-01');

firstelemnt.addEventListener('mouseover', changeBgClassOver);
firstelemnt.addEventListener('mouseout', changeBgClassOut);

function changeBgClassOver(e) {
  e.target.classList.toggle('bg-toggle-1');
}

function changeBgClassOut(e) {
  e.target.classList.toggle('bg-toggle-1');
}

.bg-toggle-1{
    background-image: url(https://website.com/wp-content/uploads/2021/03/seo-program-success-analytics-slider-home.png);
}