How to change header background image on hover menu

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>
                    <a href="index.html">home</a>
                </li>
                <li>
                    <a href="bedrijf.html">bedrijf</a>
                </li>
                <li>
                    <a href="diensten.html">diensten</a>
                </li>

                <li>
                    <a href="pictures.html">foto's</a>
                </li>
                <li><a href="contact-page.html">contacteer ons</a></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.

There are no parent selectors in CSS (generally speaking). You'd need scripting. Is jQuery included in your project? It's trivial in that case. — isherwood, Dec 08 '15 at 14:14
i rather don't use jquere or javascript (it's for a school project / for my dad ) — Jef Uytterhoeven, Dec 08 '15 at 14:17
Fair enough. This isn't really possible, then. CSS selectors can go down the tree, and across in some cases, but not up. — isherwood, Dec 08 '15 at 14:18
I think you should look at some jquery/javascript solutions ([like this one](http://stackoverflow.com/questions/33158171/change-background-image-of-div-on-navbar-hover)) because I don't think its possible using only css. — Thaillie, Dec 08 '15 at 14:18
It's not possible without js. [See this](http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) — Always Learning, Dec 08 '15 at 14:20

Orell Buehler · Answer 1 · 2015-12-08T14:33:51.970

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");
});

score 1 · Answer 2 · answered Dec 08 '15 at 14:28

1

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/

answered Dec 08 '15 at 14:28

Martin

1,216
8
15

score 0 · Answer 3 · answered Dec 08 '15 at 14:30

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>
          <a href="index.html">home</a>
          <div style="background:green">
          </div>
        </li>
        <li>
          <a href="bedrijf.html">bedrijf</a>
          <div style="background:yellow">
          </div>
        </li>
        <li>
          <a href="diensten.html">diensten</a>
        </li>

        <li>
          <a href="pictures.html">foto's</a>
        </li>
        <li><a href="contact-page.html">contacteer ons</a></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;
}

score 0 · Answer 4 · answered Dec 08 '15 at 15:00

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>

How to change header background image on hover menu

4 Answers4