How can I change a sites background image when hovering over a button using css?

Question

For a school project we need to make a basic form using html, css and php. I want to add some fun things to my site to make it more pleasant to see. One of the things that I want to add is that the page's background image changes when hovering over a button. But when I try to add that it simply does nothing. In other words I would like to change the background image from "lamps.jpg" to "lamps1.jpg" by hovering over knop.

It is handy to note that I don't have much experience in css at all so it could be possible I'm just making some dumb mistake.

I do have some other hover code for the button that does what it's supposed to do.

I've tried putting it in an article since a bunch of videos I've watched used articles. And also using :before arguments. Both to no avail.

html{
    font-family: 'Nunito', sans-serif;
}
body{
    background-size: cover;
    color: white;
    letter-spacing: 0.5x;
    background-image: url("https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80");
}
input{
   margin-left: 10%;
}
.text{
    padding: 5px 15px;
    min-width: 200px;
    letter-spacing: 0.3px;
}
.knop{
    padding: 8px 28px;
    border: #dcbc71 2px solid;
    background-color: transparent;
    color: #fff;
    -webkit-transition: border-radius 0.6s;
}
.knop:hover{
    transition: 0.6s;
    border-radius: 10px;
    color: rgba(0, 0, 0, 0.5);
    background-color: #fcdd96;
}
fieldset{
    border-radius: 25px;
    border: #dcbc71 2px solid;
    min-height: 600px;
}

<!DOCTYPE html> 
<html lang="nl"> 
 <head>
  <title>Enquete</title>
  <meta charset="utf-8"> 
  <link rel="stylesheet" href="enq.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
   $(".knop").hover(function(){
     $("body").css("background-image", "url('https://img.purch.com/w/660/aHR0cDovL3d3dy5saXZlc2NpZW5jZS5jb20vaW1hZ2VzL2kvMDAwLzA4OC85MTEvb3JpZ2luYWwvZ29sZGVuLXJldHJpZXZlci1wdXBweS5qcGVn')");
     }, function(){
     $("body").css("background-image", "url('https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80')");
   });
  </script>
  <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
 </head>
 <body>
  <fieldset>
    <legend><h3>Vrijetijdsbesteding</h3></legend>
    <form name="form" method="post" action ="verstuur.php"> 
    <p> Welkom bij deze enquete over vrijetijdsbesteding. Vul het aub eerlijk in zodat wij de best mogelijke resultaten krijgen.
     <table>
     <tr><td>Stad*:</td><td><input type = "text"  name = "stad" placeholder="Stad" class="text" required></td></tr>     
     <tr><td>Leeftijd*:</td><td> <input list="leeftijden" name= "leeftijd" placeholder="Kies een leeftijd" class="text" required>
        <datalist id="leeftijden">
        <option value="0-13">
        <option value="13-18">
        <option value="19-25">
        <option value="26-35">
        <option value="36-45">
        <option value="46-55">
        <option value="56-65">
        <option value="65+">
        </datalist></td></tr>
     <tr><td>Hoeveel uur heb je gemiddeld in de week aan vrije tijd?</td>
        <td><input list="uren" name="uren" placeholder="Kies een uurschatting" class="text" required>
        <datalist id="uren">
        <option value="Geen">
        <option value="1-5">
        <option value="6-10">
        <option value="11-15">
        <option value="16-20">
        <option value="21-25">
        <option value="26-30">
        <option value="30+">
        </datalist></td></tr>
     <tr><td style="vertical-align: top;">Wat doe je in jouw vrije tijd?</td>
       <ul>
       <td><li style="list-style-type: none;"><input type="radio" name= "besteding" value="vrienden" required> Chillen met vrienden</li>
        <li style="list-style-type: none;"><input type="radio" name= "besteding" value="tv"> TV kijken</li>
        <li style="list-style-type: none;"><input type="radio" name= "besteding" value="sport"> Sporten</li>
        <li style="list-style-type: none;"><input type="radio" name= "besteding" value="gamen"> Gamen</li>
        <li style="list-style-type: none;"><input type="radio" name= "besteding" value="lieverniet"> Vertel ik liever niet</li>
        <li style="list-style-type: none;"><input type="radio" name= "besteding" value="Anders" > Anders</li></ul></td></tr>
     <tr><td>Hoeveel uur zit je op je telefoon op een dag?</td>
        <td><input type = "text" size= "25" name = "teltijd" placeholder="Vul een uurschatting in" class="text" required></td></tr>
     <tr><td><p><input type = "submit" name='verstuurd' value = "Verstuur" class="knop"></p> </td></tr>
    </fieldset>
  </form>
  </table>
 </body>
</html>

I expected hovering over the button to change the background but it didn't do anything different.

You can't go "up" the DOM in CSS, so a child button cannot affect the parent element HTML. You could use JS to achieve this. — Jennifer Goncalves, Apr 02 '19 at 19:45
https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector — 04FS, Apr 03 '19 at 07:04

score 2 · Answer 1 · answered Apr 02 '19 at 19:47

Hi Darren and welcome to Stack Overflow!

The issue you're encountering here is that CSS cannot select upwards. i.e. one cannot select the parent of a given selector. Therefore when you hover over a button, it is not possible to apply styles to the body.

.background-changer:hover > div {
 position: absolute;
 left: 0;
 top: 0;
 right: 0;
 bottom: 0;
 z-index: -1;
 background: #fcc;
 pointer-events: none;
}

<h1>
  Hello World!
</h1>

<button class="background-changer">
  Hover me!
  <div></div>
</button>

This works by escaping the child from its parent and spreading it over the whole page. The pointer-events: none negates some buggy side-effects, still it might not be the most stable of solutions.

Leaving us to no other option than to go for JavaScript.

glhr · Accepted Answer · 2019-04-02T21:24:10.937

Implementing this with pure CSS is a little hacky. Here's how you can implement this with jQuery:

$(".toggleBgBtn").hover(function(){
  $("body").css("background-image", "url('https://img.purch.com/w/660/aHR0cDovL3d3dy5saXZlc2NpZW5jZS5jb20vaW1hZ2VzL2kvMDAwLzA4OC85MTEvb3JpZ2luYWwvZ29sZGVuLXJldHJpZXZlci1wdXBweS5qcGVn')");
  }, function(){
  $("body").css("background-image", "url('https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80')");
});

body {
  background-image: url("https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80");
  background-size: cover;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <input class="toggleBgBtn" type="button" value="Hover to change background image">
</body>

What happens here is, when a hover event is detected on an element of class toggleBgBtn, the first function is executed (it selects the body of the page and changes its background image). Then, when the mouse exits the element, the second function is executed (it selects the body of the page and changes its background image back to the original).

With your code:

html{
    font-family: 'Nunito', sans-serif;
}
body{
    background-size: cover;
    color: white;
    letter-spacing: 0.5x;
    background-image: url("https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80");
}
input{
   margin-left: 10%;
}
.text{
    padding: 5px 15px;
    min-width: 200px;
    letter-spacing: 0.3px;
}
.knop{
    padding: 8px 28px;
    border: #dcbc71 2px solid;
    background-color: transparent;
    color: #fff;
    -webkit-transition: border-radius 0.6s;
}
.knop:hover{
    transition: 0.6s;
    border-radius: 10px;
    color: rgba(0, 0, 0, 0.5);
    background-color: #fcdd96;
}

<!DOCTYPE html> 
<html lang="nl"> 
 <head>
  <title>Enquete</title>
  <meta charset="utf-8"> 
  <link rel="stylesheet" href="enq.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  
  <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
 </head>
 <body>
  <fieldset>
    <legend><h3>Vrijetijdsbesteding</h3></legend>
    <form name="form" method="post" action ="verstuur.php"> 
    <p> Welkom bij deze enquete over vrijetijdsbesteding. Vul het aub eerlijk in zodat wij de best mogelijke resultaten krijgen.
     <table>
     <tr><td><p><input type = "submit" name='verstuurd' value = "Verstuur" class="knop"></p> </td></tr>
    </table>
  </form>
    </fieldset>
    <script>
   $(".knop").hover(function(){
     $("body").css("background-image", "url('https://img.purch.com/w/660/aHR0cDovL3d3dy5saXZlc2NpZW5jZS5jb20vaW1hZ2VzL2kvMDAwLzA4OC85MTEvb3JpZ2luYWwvZ29sZGVuLXJldHJpZXZlci1wdXBweS5qcGVn')");
     }, function(){
     $("body").css("background-image", "url('https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80')");
   });
  </script>
 </body>
</html>

How would I go about adding this to my code? I've tried it with my own classes and then yours and nothing happened. My guess is that I implemented the jQuery wrong. The header looks something like [this](https://imgur.com/a/o2ueywL) — Darren, Apr 02 '19 at 20:59
@Darren please include your HTML code in your post and I'll edit my answer with a working snippet for your code. — glhr, Apr 02 '19 at 21:02
I've added my html code. The button that I want to work is called knop — Darren, Apr 02 '19 at 21:06
@Darren your code is fine actually. You just need to move my jQuery `` to the bottom of the HTML page, before the `
` tag. — glhr, Apr 02 '19 at 21:18
@Darren added a working snippet to my answer. I just removed parts of the table that are not relevant. — glhr, Apr 02 '19 at 21:25

How can I change a sites background image when hovering over a button using css?

2 Answers2