如何在一个元素上使用悬停来改变CSS, Javascript和/或HTML中整个页面的背景?

我想更改背景图像时的"欧元"按钮处于悬停状态，如有任何帮助，不胜感激

相关代码(此失败):

#body:hover > #euro{
background: url(https://media.hswstatic.com/eyJidWNrZXQiOiJjb250ZW50Lmhzd3N0YXRpYy5jb20iLCJrZXkiOiJnaWZcL2V1cm9zLmpwZyIsImVkaXRzIjp7InJlc2l6ZSI6eyJ3aWR0aCI6ODI4fX19);   
}

<body id="body">
<div id="container">
<h3>Calculator</h3>
Dollars:<br>
<input type="number" id="num1"><br> Forgein Currency:<br>
<input type="number" id="one_answers" readonly><br>
<br><br>
<button id="euro">£</button>
<button id="yen">¥</button>
<button id="rupee">₹</button>
<button id="mexpes">MX$</button>
<button id="clear">C</button>
</div>
<script src="script.js"></script>
</body>

任何帮助都将非常感激!

使用javascript

euro.onmouseover = () => {
document.body.style.background = 'url(https://media.hswstatic.com/eyJidWNrZXQiOiJjb250ZW50Lmhzd3N0YXRpYy5jb20iLCJrZXkiOiJnaWZcL2V1cm9zLmpwZyIsImVkaXRzIjp7InJlc2l6ZSI6eyJ3aWR0aCI6ODI4fX19)';
}
euro.onmouseleave = () => {
document.body.style.background = 'white';
}

纯HTML + CSS实现

#euro:hover~#bg {

background-image: url("https://media.hswstatic.com/eyJidWNrZXQiOiJjb250ZW50Lmhzd3N0YXRpYy5jb20iLCJrZXkiOiJnaWZcL2V1cm9zLmpwZyIsImVkaXRzIjp7InJlc2l6ZSI6eyJ3aWR0aCI6ODI4fX19");
}
#bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
widht: 100%;
height: 100%;
z-index: -1;
}

<body>
<div id="container">
<h3>Calculator</h3>
Dollars:<br>
<input type="number" id="num1"><br> Foreign Currency:<br>
<input type="number" id="one_answers" readonly><br>
<br><br>
<button id="euro">£</button>
<button id="yen">¥</button>
<button id="rupee">₹</button>
<button id="mexpes">MX$</button>
<button id="clear">C</button>
<div id="bg">
</div>

</div>
<script src="script.js"></script>
</body>

相关内容

最新更新

热门标签：