CSS & JS 在按钮悬停时更改 div 背景颜色？答案

【问题标题】：CSS & JS change div background-color on button hover?CSS & JS 在按钮悬停时更改 div 背景颜色？
【发布时间】：2021-04-21 15:13:31
【问题描述】：

例如，对于我的网站，我设置了 div 类“coverbg”的背景颜色

cover{
  background-color: #FFFFFF;
}

我还在 .html 文件中定义了一个按钮（假设它的 ID 为“triggerbg”），并且我希望 div 的背景颜色在按钮时更改（例如 #000000;）用鼠标悬停在鼠标上，当鼠标不在按钮上时变回来。有没有办法做到这一点？

我还尝试了 stackoverflow 中的代码，我尝试将“body”替换为 div 类“cover”，但它不起作用，

var button = document.getElementById('hover');
var body = document.body;

button.onmouseover = function() {
  body.className = 'hovered';
}

button.onmouseout = function() {
  body.className = '';
}

body {
  background: #000;
}

body.hovered {
  background: #ff0;
}

&lt;button id="hover"&gt;button&lt;/button&gt;

对不起，我是 JS 新手。

【问题讨论】：

您问题中的 sn-p 工作正常。悬停时 bg 变为黄色
开发者控制台有错误吗？
你也应该习惯使用 addEventListener 和 classList。
你想改变body还是一些div？
你的代码没有在你的css中显示.cover类中的点，这可能是问题吗？

标签： javascript html jquery css

【解决方案1】：

如果你想改变身体背景修改你得到的 Ran Turner 的帖子

function over(){
document.getElementsByTagName("BODY")[0].className = 'hovered';
}
function out(){
document.getElementsByTagName("BODY")[0].className = ' '
}

.hovered{
background:#000000;
}

<html>
<head></head>
<body>
<button onmouseover="over()"  onmouseout="out()">hover</button>
</body>
</html>

或者如果你想要一个 div

var trigger=document.getElementById("triggerbg");
var cover=document.getElementsByClassName("cover");
trigger.onmouseover=function(){
for (var i = cover.length-1; i >= 0; i--) {
   cover[i].className="hovered";
}
cover=document.getElementsByClassName("hovered");
}
trigger.onmouseout=function(){
for (var i = cover.length-1; i >= 0; i--) {
   cover[i].className="cover";
}
cover=document.getElementsByClassName("cover");
}

.cover{
background-color:yellow;
}
.hovered{
background-color:#000000;
}

<button id="triggerbg">hover</button>
<div class="cover">here</div>
<div class="cover">there</div>
<div class="cover">and</div>
<div class="cover">everywhere</div>

【讨论】：

【解决方案2】：

您还需要获取 div 元素和 onmouseover/onmouseout 事件分别从该 div 添加/删除类

var button = document.getElementById('hover');
var div = document.getElementById('your-div');


button.onmouseover = function() {
    div.className = 'hovered';
}

button.onmouseout = function() {
    div.className = '';
}

.hovered{
  background-color: #000000;
}

<button id="hover">button</button>
<div id="your-div">
hover button to change color
</div>

【讨论】：

【解决方案3】：

在此代码中，onmouseover 和 onmouseout 事件用于改变 div 的类。

<html lang="en">
<head>
    <title>Document</title>
    <style>
        /* hover class to change the background when hover on button */
        .hover{     
            background-color:#aaaaaa
            /* color=red */
        }
        
    </style>
</head>
<body>
    <button id="hover" class="demo">button</button>
    <div id='div' >Hover on button to see the effect on div</div>
    
    <script>

    let button = document.getElementById('hover');
    
    let div = document.getElementById('div');

    button.onmouseover = () =>{         // onmouseover event which executes when the mouse hover on element button
      div.className ='hover';           // change the class name of div
    }
    button.onmouseout = () =>{         

      div.className ='';
    }

    
    </script>
</body>
</html>

【讨论】：

【解决方案4】：

这是用于更改鼠标悬停时按钮背景的代码 sn-p。在此代码中，我们使用了一个类的 hover 属性，该属性在悬停时更改按钮的背景。您可以在标签中使用外部 CSS 文件中的样式或 HTML 文件中的内部 CSS。

<html lang="en">
<head>
    <title>Document</title>
    <style>
        .demo:hover{
            background-color: #FFFFFF;
        }
    </style>
</head>
<body>
    <button id="hover" class="demo">button</button>
</body>
</html>

【讨论】：