change body background image/gradient on hovering other elements

Question

I'm trying to change the background image/gradient of the body while hovering on a div (id="above"), I follow the way they do in another post (http://stackoverflow.com/questions/1462360/css-hover-one-element-effect-for-multiple-elements) but it doesn't seems to work

css

body {
    background: -webkit-gradient(radial, ...);
}

.about:hover body{
    background: -webkit-gradient(radial, ...); // new gradient
}

html

<body>
    <div class="about">
        <h1 id="title">About</h1>
        <div>
            <p id="about">stuff</p>
        </div>
    </div>
</body>

This has no effect, I even try to test if this works by changing the title style to italic while hovering, still no use

.about:hover h1.title {
    font-weight: italic;
}

Is that the way I use it is wrong or there is something else, anyone can help?

CSS works from parent to children, you cannot reference a parent element from a child. — TheZ, Aug 13 '12 at 19:06
`font-weight: italic;` is invalid it should be `font-style:italic` — Musa, Aug 13 '12 at 19:10
@TheZ Thanks! But any idea how to reference back to the parents? Is there anyway at all? — ryf9059, Aug 14 '12 at 16:02
@ryf9059 In CSS I would say no, Javascript could do it. CSS is as fast as it is because it doesn't ever have to look back up the hierarchy, it only applies downward. — TheZ, Aug 14 '12 at 16:07

Oriol · Accepted Answer · 2012-08-13T19:29:22.143

If you want to do it with CSS (no javascript), you can do a trick with z-index:

See an example here: http://jsfiddle.net/nCyJ4/

Or, in your case, http://jsfiddle.net/nCyJ4/1/ :

HTML:

<div class="initial background" id="bg0"></div>
<div class="about bgwrapper">
    <h1 id="title">About</h1>
    <div>
        <p id="about">stuff</p>
    </div>
    <div id="bg1" class="background"></div>
</div>

CSS:

.background{
    position:fixed;
    top:0;left:0;
    width:100%;height:100%;
    display:none;
    z-index:-1;
}
.bgwrapper:hover>.background,.initial.background{
    display:block;
}
.initial.background:hover{
    display:block!important;
}
.background:hover{
    display:none!important;
}
#bg0{
    background: -moz-linear-gradient(left, #FF0000 0%, #FF9900 10%, #FFFF00 16.666%, #CCFF00 20%, #32FF00 30%, #00FF00 33.333%, #00FF65 40%, #00FFFF 50%, #00FFFF 50%, #0065FF 60%, #0000FF 66.666%, #3300FF 70%, #CB00FF 80%, #FF00FF 83.333%, #FF0098 90%, #FF0004 100%);

}

#bg1{
    background: -moz-linear-gradient(left center, #FF0000, #000000) repeat scroll 0 0 transparent
}

score 0 · Answer 2 · answered Aug 13 '12 at 19:18

0

Since body is not a descendant of div.about, it cannot be targeted like that. You could use a little JavaScript to achieve the effect you need though.

CSS

body {
    background: -webkit-gradient(radial, ...);
}

body.hover {
    background: -webkit-gradient(radial, ...); // new gradient
}

JavaScript

document.getElementsByClassName('about')[0].onmouseover = function () {
    document.getElementsByTagName('body')[0].className += ' hover';
}
document.getElementsByClassName('about')[0].onmouseout = function () {
    var n = document.getElementsByTagName('body')[0];
    n.className = n.className.replace('hover', '');
}

answered Aug 13 '12 at 19:18

Micah Henning

2,125
1
18
26

I actually want to use the CSS because I want to combine it with the newest transition technique so my background gradient to change smoothly, will javascript achieve this effect? – ryf9059 Aug 14 '12 at 16:04
You could animate the change with jQuery... but perhaps your best method is to alter your markup instead of scripting, as @Oriol described in his/her answer. – Micah Henning Aug 16 '12 at 18:57

change body background image/gradient on hovering other elements

2 Answers2

Linked