gpt4 book ai didi

javascript - CSS 和 JS 更改按钮悬停时的 div 背景颜色?

转载 作者:行者123 更新时间:2023-12-02 18:47:54 24 4
gpt4 key购买 nike

例如,对于我的网站,我有一个 div 类“coverbg”的设置背景颜色

cover{
background-color: #FFFFFF;
}

我还在 .html 文件中定义了一个按钮(假设它的 ID 为“triggerbg”),并且我希望在按钮按下时更改 div 的背景颜色(例如更改为 #000000;)鼠标悬停在按钮上,当鼠标不再位于按钮上时变回原来的状态。有办法做到这一点吗?

我还尝试了 stackoverflow 中的代码,我尝试用 div 类“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 新手。

最佳答案

如果你想改变正文背景修改 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>

关于javascript - CSS 和 JS 更改按钮悬停时的 div 背景颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67182777/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com