Question

我的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>

CSS ..

.bg {
  background: yellow;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
}

.content {
   background: red;
}

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; //

小提琴：https://jsfiddle.net/bqnw4qyb/56/

问题

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

background: url('someImage');

系统类型..

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

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

在这个阶段我很难过，所以非常感谢任何帮助。

Answer 1

function green() {
  document.getElementsByClassName("content")[0].style.backgroundColor = "green";
}
function red() {
  document.getElementsByClassName("content")[0].style.backgroundColor = "red";
}

.bg {
  background-color: yellow;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
}

.content {
   background: red;
}

     <div class="bg"></div>
            
            <div class="content" id="hover">
            
                <div class="one" onmouseover="green()" onmouseout="red()" 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>

请看我是如何实现的，这是你想要的吗？

我的程序正在使用 onmouseover 和 onmouseout 事件。

请在评论中留下任何疑虑，希望它有所帮助;）

Answer 2

检查错误控制台！

您没有box个对象，因为您没有ID bg只有class的元素。

添加id同时将bg添加到div中。

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

同样根据您当前的定位，bg div实际上并不可见。

https://jsfiddle.net/bqnw4qyb/67/

Javascript＆amp; CSS / HTML - 鼠标悬停在DIV上的背景变化

2 个答案: