How can I use hover on one element to change the background of the whole page in CSS, Javascript and/or 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

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

 #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>

How can I use hover on one element to change the background of the whole page in CSS, Javascript and/or HTML

Question

2 answers

solution1
1 2022-05-17 00:59:27

solution2
0 ACCPTED 2022-05-17 01:06:24

How can I use hover on one element to change the background of the whole page in CSS, Javascript and/or HTML

Question

2 answers

solution1 1 2022-05-17 00:59:27

solution2 0 ACCPTED 2022-05-17 01:06:24

solution1
1 2022-05-17 00:59:27

solution2
0 ACCPTED 2022-05-17 01:06:24