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

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!

CodePudding user response：

using javascript

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

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

CodePudding user response：

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>