Javascript&；CSS/HTML-将鼠标移到DIV上时的背景更改

我的HTML中有以下代码

 <div class="bg"></div>

        <div class="content" id="hover">

            <div class="one" id="hover-over">1</div> <!--Trigger!-->
            <div class="two">2</div>
            <div class="three">3</div>
            <div class="four">4</div>
            <div class="five">5</div>

        </div>

Javascript

    var box = document.getElementById("bg");
    var bgChanger = document.getElementById("hover-over");
    //var body = document.getElementsByTagName("body");

    function changeBackgroundUp() {
        box.style.backgroundColor = "blue"; 
        //body.style.backgroundColor = "#6fcc6f";
    }

    function changeBackgroundDown() {
        box.style.backgroundColor = "green"; 
        //body.style.backgroundColor = "red";
    }

    bgChanger.onmouseover = changeBackgroundUp; // 
    bgChanger.onmouseleave = changeBackgroundDown; // 

小提琴：

问题

我希望将项目的背景更改为绿色，例如，当用户将鼠标悬停在“content”中的一个DIV元素上时。因此，当用户将鼠标悬停在“1”上时，整个页面的背景将变为绿色。我的DIV元素的背景是红色的，我不想改变这种颜色，只想改变背景颜色，理想情况下，我希望使用

background: url('someImage');

系统类型

我尝试过许多现有的解决方案，例如使用CSS hover：

.one:hover ~ .bg {
background: url('someImage')
}

在这个阶段，我被难倒了，所以非常感谢任何帮助

函数绿色（）{
document.getElementsByClassName（“内容”）[0].style.backgroundColor=“绿色”；
}
函数red（）{
document.getElementsByClassName（“内容”）[0].style.backgroundColor=“红色”；
}

.bg{
背景颜色：黄色；
位置：固定；
排名：0；
左：0；
z指数：1；
}
.内容{
背景：红色；
}

1.
2.
3.
4.
5.

检查错误控制台

您没有

box

对象，因为您没有id为

bg

仅类的元素

将

id

添加到带有class

bg

的div中

<div class="bg" id="bg"></div>

此外，根据您当前的定位，bg div实际上不可见

---

这更改了错误的div，背景应该更改。

bg

非常感谢。我只需要更改CSS中的一些属性，但是现在它已经完全工作了。小提琴：

<div class="bg" id="bg"></div>