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

Question

I want to change the background image when the "euro" button is hovered on, any help would be greatly appreciated我想在“欧元”按钮悬停时更改背景图像，任何帮助将不胜感激

Relevant code (this failed):相关代码（失败）：

 #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="ans" 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>

Any help would be greatly appreciated!任何帮助将不胜感激！

Answer 1

using javascript使用 javascript

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

euro.onmouseleave = () => {
  document.body.style.background = 'white';
}

Answer 2

Pure HTML + CSS implementation纯 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="ans" 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>

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

问题描述

2 个解决方案

解决方案1
1 2022-05-17 00:59:27

解决方案2
0 已采纳 2022-05-17 01:06:24

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

问题描述

2 个解决方案

解决方案1 1 2022-05-17 00:59:27

解决方案2 0 已采纳 2022-05-17 01:06:24

解决方案1
1 2022-05-17 00:59:27

解决方案2
0 已采纳 2022-05-17 01:06:24