Home/ Questions/Q 8826783
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T07:13:28+00:00

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

  • 0

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>

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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/

    • 0