將鼠標懸停在一個div上並更改其他div的背景

Question

我一直在用

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

當我將鼠標懸停在我的div ID“打印”（其中有圖像）上時，是否可以更改其他div（標題右）的背景？

Answer 1

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

您必須提供tha類名，但是要提供圖像路徑。 你可以這樣

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

然后將toggleClass更改為

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

並最初將class1作為具有id headerright div的類

編輯我從您的討論中了解的內容。 將您的懸停功能更改為此

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

你可以試試看

Answer 2

嘗試

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

然后定義一個CSS樣式

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

演示： 小提琴

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

創建一個新的班級

 .backgroungEG {

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


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

我希望這可以..