0

I was wondering, how do you (or can you) change the background color of a element using purely css coding. I mean, when you have css like this:

body{
    background-color:grey;
}
.button{
    color:blue;
}

And then you have :

.button:hover{
    color:yellow;
}

My question is, can you make the body background color change when you hover over the element with the class .button?

Jeroen
  • 60,696
  • 40
  • 206
  • 339
Jacob G
  • 13,762
  • 3
  • 47
  • 67
  • 1
    In this instance, no, because there are no parent selectors present in CSS. You would need JS to transverse the DOM like this. – Josh Crozier Mar 08 '14 at 18:55
  • Basically..you can't. CSS will not allow you to affect elements higher up the DOM than themselves. JS/JQ answer is required. – Paulie_D Mar 08 '14 at 18:56
  • 1
    In the future ([CSS Selectors Level 4](http://www.w3.org/TR/2013/WD-selectors4-20130502/)) you might be able to do this with CSS, e.g. `body! .button:hover` to select parents (or "determine selector subjects" to be a bit more precise), but the spec's still a draft and browser support isn't really here yet. Until then it'll be JS for this kind of thing. – Jeroen Mar 08 '14 at 19:08

1 Answers1

4

CSS does not handle relations/interactions between an element and its parent. This might require Javascript. Here's a jQuery example :

$(document).ready(function(){
    $(".button").hover(function(){
        $("body").css("background-color", "newcolor");
    }
}

Another try without jQuery :

function onButtonHover(){
    document.body.style.background = color;
}

You would need to bind this function to the onMouseHover event on every .button element though (or see JoshC's fiddle : http://jsfiddle.net/5a9TS/) :

<button class="button" onMouseOver="onButtonHover()">MyButton</button>

More about this event : http://www.w3schools.com/tags/ev_onmouseover.asp. Note that the opposite interaction could be done is CSS though (parent-to-child relation) :

body:hover .button{
    background-color: newColor;
}
Community
  • 1
  • 1
John WH Smith
  • 2,743
  • 1
  • 21
  • 31
  • 1
    1+ For the option without jQuery.. you could also add something like this if you wanted unobtrusive JavaScript http://jsfiddle.net/5a9TS/ – Josh Crozier Mar 08 '14 at 19:08
  • Thank you for the answers. I didn't think it could be done, i was just checking. – Jacob G Mar 08 '14 at 19:12
  • How would i change the background color of another element such as or
    ?
     – Jacob G Mar 08 '14 at 19:20
  • Replace `$("body")` by `$("div#id")` or `$("div.class")`, if you use jQuery. Otherwise, `document.body` must become `document.getElementById("divId")`. Selecting by class without JQ is a little trickier. See : http://stackoverflow.com/questions/3808808/how-to-get-element-by-class-in-javascript - @JoshC +1 for your fiddle, much nicer. – John WH Smith Mar 08 '14 at 19:22
  • I was using document.getElementById but i accidentally capitalized the "G" in "get" so it didn't work. Thank you for all your help! – Jacob G Mar 08 '14 at 19:26