How to make multiple divs change the background image of one single div

Question

I have a div as a banner/header image for a website and this image will show a picture of houses on it initially. The banner will also have 6 divs acting as buttons and when the user hovers over each div, it changing the background image of the header to a different image that will represent each page.

Here is the code I have so far:

Fiddle

HTML:

<div id="navholder">

<div id="nav">
<a href="index.html"><div id="button1"><div id="triangle"></div><div id="buttonname">Home</div></div></a>

<a href="buying.html"><div id="button2"><div id="triangle"></div><div id="buttonname">Buying</div></div></a>

<a href="renting.html"><div id="button3"><div id="triangle"></div><div id="buttonname">Renting</div></div></a>

<a href="building.html"><div id="button4"><div id="triangle"></div><div id="buttonname">Building</div></div></a>

<a href="architecture.html"><div id="button5"><div id="triangle"></div><div id="buttonname">Architecture</div></div></a>

<a href="landbuying.html"><div id="button6"><div id="triangle"></div><div id="buttonname">Land Buying</div></div></a>
</div>

</div>

CSS:

#navholder {
    position:absolute;
    background:#FFFFFF;
    width:950px;
    height:350px;
    top:150px;
    margin:0 auto;
    left:0;
    right:0;
    border:solid 1px #999;
    background-image: url(http://placehold.it/950x350);

}

#nav {
    width:950px;
    position:absolute;
    bottom:-22px;
    text-align: center;
    display:inline-block;
}

#button1, #button2, #button3, #button4, #button5, #button6 {
    width:130px;
    height:35px;
    background-color:#879362;
    margin-left:2px;
    margin-right:2px;
    display:inline-block;
    font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
    line-height:35px;
    font-weight:bold;
    color:#fff;
}

#button1:hover > #triangle, #button2:hover > #triangle, #button3:hover > #triangle, #button4:hover > #triangle, #button5:hover > #triangle, #button6:hover > #triangle{ 
    display: block;
}

#button1:hover, #button2:hover, #button3:hover, #button4:hover, #button5:hover, #button6:hover{ 
    background-color:#B7939B;
}

#triangle {
    position:relative;
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid #B7939B;
    top:-15px;
    left:0px;
    right:0;
    margin:0 auto;
    display: none;
}

#buttonname {
    width:130px;
    position:absolute;
    top:0px;
    margin:0 auto;
}

I have tried implementing this example: from On a CSS hover event, can I change another div's styling?

  #a:hover + #b {
        background: #ccc;
    }

But I couldn't quite get it to work with my layout of multiple divs.

Is there a way to do it purely with CSS? I will use JS if that's the only reasonable way.

Runium · Answer 1 · 2014-02-11T21:15:34.323

Edit: Updated the CSS a little. It is only a fiddle, but, still. Forgot to add focus. Fixed.

One possible approach could be something like this. However, I am very rusty when it comes to CSS and have not tested it in other then latest Firefox and Chrome.

No JavaScript.

http://jsfiddle.net/Ifnak/ZyX4t/

Basic idea is to use a div directly after each link, as such you can use the + selector.

HTML

<div id="banner">banner
    <div id="menu">
        <a id="mm_btn1" href="a.html">Home<span></span></a>
        <div class="h_banner">A</div>
        <a id="mm_btn2" href="b.html">Buying<span></span></a>
        <div class="h_banner">B</div>
        <a id="mm_btn3" href="c.html">Renting<span></span></a>
        <div class="h_banner">C</div>
    </div>
</div>

CSS:

#banner, .h_banner {
    width            : 500px;
    height           : 250px;
    position         : absolute;
    margin           : 0 auto;
    left             : 0;
    right            : 0;
}
#banner {
    top              : 50px;
    border           : 10px solid #942;    
    background-image : url(http://placehold.it/500x250/222/666&text=Welcome);
}
#menu {
    width            : 500px;
    position         : relative;
    top              : 220px;
    margin           : 0 auto;
    text-align       : center;
}

#menu a {
    position         : relative;
    z-index          : 100;
    display          : inline-block;
    padding          : 20px 50px;
    background       : #963;
    width            : 60px;
    text-decoration  : none;
    outline          : none;
    font             : bold 18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
    color            : #aaa;
}
/* Display none, etc. Here opacity is used to combine with transition effect. */
.h_banner {
    opacity          : 0;
    top              : -240px;
    z-index          : 90;
  -webkit-transition : .7s;
          transition : .7s;
}
/* On hover set opacity and background image for div. 
 * Image could be set earlier to force pre-load. 
 *
 * __Important__ to include "focus" so that Tab etc. gives 
 * the same effect as hover. */
#mm_btn1:focus + .h_banner, #mm_btn1:hover + .h_banner {
    opacity          : 0.98;
    background-image : url(http://placehold.it/500x250&text=Home);
}
#mm_btn2:focus + .h_banner, #mm_btn2:hover + .h_banner {
    opacity          : 0.98;
    background-image : url(http://placehold.it/500x250&text=Buying);
}
#mm_btn3:focus + .h_banner, #mm_btn3:hover + .h_banner {
    opacity          : 0.98;
    background-image : url(http://placehold.it/500x250&text=Renting);
}



/* Arrow */
#menu a span {
    display          : none;
}
#menu a:focus span,
#menu a:hover span {
    display          : block;
}
#menu a span:after {
    content          : "";
    position         : absolute;
    width            : 0;
    height           : 0;
    border-width     : 30px;
    border-style     : solid;
    border-color     : transparent transparent rgba(153,102,51,.98) transparent;
    top              : -55px;
    margin           : 0 -30px;
}

score 1 · Accepted Answer · answered Dec 20 '13 at 10:30

Try this

HTML

<a href="index.html"><div id="button1" onmouseover="chbg('http://placehold.it/300x250')" onmouseout="chbg('http://placehold.it/950x350')"><div id="triangle"></div><div id="buttonname">Home</div></div></a>

Script

function chbg(img) {
    document.getElementById('navholder').style.backgroundImage = 'url('+img+')'; 
}

DEMO

score 0 · Answer 3 · answered Dec 20 '13 at 10:29

0

Check this out :-

http://jsfiddle.net/8C4TT/

$(".buy").hover(function () {
    $("#navholder").css("background-image","url('http://upload.wikimedia.org/wikipedia/commons/0/06/Skybox_sky.png')");
});

$(".rent").hover(function () {
    $("#navholder").css("background-image","url('http://upload.wikimedia.org/wikipedia/commons/0/06/Skybox_sky.png')");
});

answered Dec 20 '13 at 10:29

Anup

8,072
15
62
122

OP ask Pure JS not Jquery – Sridhar R Dec 20 '13 at 10:30
ohh sorry i was in hurry – Anup Dec 20 '13 at 10:32
1

It's ok, I can use jQuery too :) so thank you, I will check this out – man Dec 20 '13 at 10:35

score 0 · Answer 4 · answered Dec 20 '13 at 10:33

The example you give won't work as + selects directly adjacent siblings to the target selector (http://www.w3.org/TR/css3-selectors/#selectors). #navholder is the parent, and I'm pretty sure it's impossible to select an element's parent via CSS alone.

You could change the structure so that #navholder is inside #nav, and use ~ to select it via any sibling, or use a JS solution.

score 0 · Answer 5 · answered Dec 20 '13 at 10:39

This is not pure javascript or css, it uses jQuery to do it. If it helps great, it's only one solution for this problem :)

Html:

<div id="navholder">
    <div id="nav">
<a href="index.html" data-img="http://placehold.it/950x350/FFFFFF">
    <div id="button1">
        <div id="triangle"></div>
        <div id="buttonname">Home</div>
    </div>
 </a>

<a href="buying.html" data-img="http://placehold.it/950x350/0000FF"><div id="button2"><div id="triangle"></div><div id="buttonname">Buying</div></div></a>

...
</div>

Javascript

$(function () {
    var $navholder = $("#navholder");
    $navholder.on("mouseenter mouseleave", "a", function (event) {        
        if (event.type === "mouseenter") {                
            $navholder.css("background-image", "url('" + $(this).data("img") + "')");
        } else {
            $navholder.css("background-image", "url('http://placehold.it/950x350')");
        }
    });
});

How to make multiple divs change the background image of one single div

5 Answers5

Linked