Question

As my title explains, I have a background image I am using and want it to change when I hover over a div in a certain area of the page.

Currently my background image for #main is 4Era_home.jpg and when I hover over #television I would like that background image to change to 4Era_home_tv.jpg.

I hope this makes sense as I have been looking online but cannot find a solution that will work. I know that css will not work for this so any help with the jquery or javascript for this would help.

<div id="main">
    <div id="television">
        <a href="#" id="tv_glow">test</a>
    <div>
</div>

Answer 1

You can use CSS as well as jQuery.

Update your HTML to use a default class pointing to the default image, in te below example home:

<div id="main" class="home">
    <div id="television">
        <a href="#" id="tv_glow">television test</a>
    <div>
</div>​

Use CSS styles similar to the below to define the require images:
(You can ginore the styles I used on #main they are just for the DEMO, the styles you are interested in are .home and tv)

#main{
  background-repeat:no-repeat;
  text-align: center; 
  width:200px;
  height:200px;
}

.home
{
  background-image:url('http://www.fileden.com/files/2012/6/19/3318010/Eraser.png');
}

.tv
{
  background-image:url('http://www.fileden.com/files/2012/6/19/3318010/Ok.png');
}

Switch classes using jQuery toggleClass() like this:

$("#television").hover(function() {
    var $parent = $(this).parent();
    $parent.toggleClass("home, tv");
}, function() {
    var $parent = $(this).parent();
    $parent.toggleClass("home, tv");
});​

DEMO – Switching background image in parent element