How to change header background image on hover menu - html

Question

I have been searching for a way to change the background image of my banner when I hover my menu bar.
here you have my html
<div id="container">
<header>
<nav>
<ul>
<li>
home
</li>
<li>
bedrijf
</li>
<li>
diensten
</li>
<li>
foto's
</li>
<li>contacteer ons</li>
</ul>
</nav>
</header>
So what i wanna do is when I hover over one of my buttons the background of header should change to a picture I pick for this page.
I hope this is possible it would be great.

Answer 1

You could do that in jQuery:
$("li > a").hover(function(){
$("header").css("background-image", "img.jpg");
});
This code says if you hover over an element with a-Tag which is in a li-Tag then it changes the background-image of the header to img.jpg.
Now if you want that the background-image changes back if you don't hover then add this code too:
$("li > a").mouseleave(function(){
$("header").css("background-image", "none");
});

Answer 2

You could use pseudo elements (:before) on the LI's when you hover over them.
It's a bit hacky, but does work and without javascript too.
working demo here:
http://jsfiddle.net/ezjjyptk/

Answer 3

Here is a solution I've come up with. Basically, add an empty, absolutely positioned div inside each <li> element, and move it up from behind the header on hover.
JSFiddle
<div id="container">
<header>
<nav>
<ul>
<li>
home
<div style="background:green">
</div>
</li>
<li>
bedrijf
<div style="background:yellow">
</div>
</li>
<li>
diensten
</li>
<li>
foto's
</li>
<li>contacteer ons</li>
</ul>
</nav>
</header>
header {
position: relative;
width: 100%;
background: red;
}
ul li a {
position: relative;
z-index: 3;
}
ul li:hover div {
z-index: 1;
}
ul li div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}

Answer 4

I wouldn't say it's impossible without javascript, but I certainly wouldn't call this code pretty
.fixed {
position: absolute;
top: 50px;
left: 0;
opacity: 0;
transition: opacity .5s ease-in-out;
}
li {
display: inline-block;
}
.show1:hover + #header1 {
opacity: 1;
}
.show2:hover + #header2 {
opacity: 1;
}
.show3:hover + #header3 {
opacity: 1;
}
.show4:hover + #header4 {
opacity: 1;
}
<li>
<a class="show1" href="index.html">Show 1</a>
<img class="fixed" id="header1" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Color_blocks.svg/800px-Color_blocks.svg.png" />
</li>
<li>
<a class="show2" href="bedrijf.html">Show 2</a>
<img class="fixed" id="header2" src="http://static1.squarespace.com/static/534d1b21e4b077040469bae0/t/5362730de4b04c365eb65a37/1398960956409/The+two+colour+shirt" />
</li>
<li>
<a class="show3" href="diensten.html">Show 3</a>
<img class="fixed" id="header3" src="http://i1.wp.com/makeapowerfulpoint.com/wp-content/uploads/2015/03/Drunk-Tank-Pink.png" />
</li>
<li>
<a class="show4" href="pictures.html">Show 4</a>
<img class="fixed" id="header4" src="http://3.bp.blogspot.com/-YFX5nFtmjiA/T7co_rB3keI/AAAAAAAAI0c/EkNV9tX3xt8/s920/color%2Bwheel%2Bstar%2Bblock%2Blogo%2Bv1.jpg" />
</li>