Change Body Background Image on Hover other Element

Question

Possible Duplicate:
Change color of sibling elements on hover using CSS

Basically i want to change my body background image on hover of #fb or any other div id i create, i couldn't find a solution for this anywhere

<body>
<div class="container">
    <div class="sixteen columns">
        <h1 class="remove-bottom" style="margin-top: 40px">Club 77</h1>
        <hr />
    </div>
    <div class="sixteen columns">
        <h3><a href="" id="fb">Facebook</a></h3>
    </div>
    <div class="sixteen columns">
        <h3><a href="">Photos</a></h3>
    </div>
    <div class="sixteen columns">
        <h3><a href="">Contact</a></h3>
    </div>

</div>

I believe you'll want Javascript, CSS gurus may give you some fancy new workaround, but pure CSS follows the family tree *down*, meaning you cant refer to parent styles from the child, instead use a form of Javascript Hover events (or mouseenter, mouseleave) — anson, Nov 14 '12 at 00:32

score 2 · Accepted Answer · answered Nov 14 '12 at 01:34

2

I believe the best is doing via jQuery:

First. Preload the background image:

$('<img/>').hide().attr('src', 'images/background.jpg').load(function(){
    $('body').append($(this));
});

Second. Image mouse over:

$('#fb').hover(function() {
    $('body').css('background-image', 'url("images/background.jpg")');
}, function() {
    $('body').css('background', '');
});

Here is JSFiddle demo: http://jsfiddle.net/kGgyY/1/

answered Nov 14 '12 at 01:34

Fred Wuerges

1,965
2
21
42

Detail, you can adjust the style of his background as needed (in this case, if not as my example and you want to stay 100% on screen) – Fred Wuerges Nov 14 '12 at 01:36

score 1 · Answer 2 · answered Nov 14 '12 at 00:32

Believe for that you would need to fall-back to relying on a javascript event listener. One that would listen to onmouseover/onmouseout of your #fb div and change the class-name of the <body> tag as required. Never seen any other way to change an elements style based on a childs :hover status.

score 0 · Answer 3 · answered Nov 14 '12 at 01:20

In order to do this the body element (it will instead have to be a div) has to be nested inside the #fb. On hover call the nested div. Set the nested div to position absolute and height/width 100%. If you need bigger than 100% then can't use AP because it will create scrollbars. In which case you can use position fixed with height/width 999em. That may work. You'll have some z-index issues to work out.

Change Body Background Image on Hover other Element

3 Answers3