hover over one div and change background of a different div

Question

I have been using

$(function(){
$("#print").hover(function(){
$("#headerright").toggleClass("img/divright.jpg");
});
});

when I mouseover on my div id "print" (which has an image in it) is it possible to change the background of my other div (headderright)?

Answer 1

$("#headerright").toggleClass("img/divright.jpg")

you have to give tha class name but you are giving image path. you can do this way

.class1{
background-image:url('image1.gif');
}
.class2{
background-image:url('image2.gif');
}

and on hove change toggleClass to

$("#headerright").toggleClass('class1').toggleClass('class2')

and initially put class1 as a class of your div with id headerright

EDIT what i understand from your discussion. change your hover function to this

$("#print").hover(function() {
    $("#headerright").css("background-image","url('img/divright.jpg')");
},function(){
   $("#headerright").css("background-image"," ");
});

you can try this

Answer 2

Try

$("#print").hover(function() {
    $("#headerright").addClass("my-background");
},function(){
    $("#headerright").removeClass("my-background");
});

Then define a css style

.my-background{
    background: img/divright.jpg;
}

Demo: Fiddle

Answer 3

 Try this: it will change the background:     

 $(function(){
 $("#print").hover(function(){
  $("#headerright").css("background-image","url('img/divright.jpg')");
 });
 });

If u have image on print div it will change the src and display the other image..

Answer 4

Create a new class

 .backgroungEG {

     background-image :  "img/divright.jpg"
  }


  $("#print").hover(function(){
    $("#headerright").addClass("backgroungEG ");
  });

I hope this works..