CSS & JS 更改按钮 hover 上的 div 背景颜色？
[英]CSS & JS change div background-color on button hover?
问题描述
例如，对于我的网站，我设置了 div class “coverbg”的背景颜色
cover{
background-color: #FFFFFF;
}
我还在 .html 文件中定义了一个按钮（假设它的 ID 为“triggerbg”），并且我希望在悬停按钮时更改 div 的背景颜色（例如 #000000;）用鼠标结束并在鼠标不在按钮上时变回来。 有没有办法做到这一点？
我还尝试了stackoverflow的代码，我尝试用div class“cover”替换“body”，但它不起作用，
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; }
<button id="hover">button</button>
抱歉，我是 JS 新手。
4 个解决方案
解决方案1
2 2021-04-20 16:46:56
如果你想改变身体背景修改 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>
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
1 2021-04-20 16:31:45
您还需要获取 div 元素和 onmouseover/onmouseout 事件分别从该 div 添加/删除 class
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
1 2021-04-20 17:16:52
在此代码中，onmouseover 和 onmouseout 事件用于更改 div 的 class。
<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
-1 2021-04-20 16:54:55
这是用于更改鼠标 hover 上的按钮背景的代码片段。 在此代码中，我们使用 class 的 hover 属性，当 hover 时更改按钮的背景。 您可以在标签中的 HTML 文件中使用外部 CSS 文件或内部 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>
使用jQuery在鼠标悬停（按钮）上更改外部div的背景色
[英]change of background color of outer div on mouse hover (button) using jquery
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.