将鼠标悬停在一个 div 上并更改另一个 div 的背景答案

【问题标题】：hover over one div and change background of a different div将鼠标悬停在一个 div 上并更改另一个 div 的背景
【发布时间】：2013-04-01 18:09:21
【问题描述】：

我一直在用

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

当我将鼠标悬停在我的 div id“print”（其中有一个图像）上时，是否可以更改我的另一个 div 的背景（headderright）？

【问题讨论】：

你需要使用类名，img/divright.jpg不是类名

标签： javascript image html hover

【解决方案1】：

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

您必须提供类名，但您提供的是图像路径。你可以这样做

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

然后将toggleClass更改为

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

最初将class1 作为你的div 的一个类，id 为headerright

编辑我从你的讨论中了解到。将悬停功能更改为此

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

你可以试试这个

【讨论】：

我使用 div id 是否重要
我的图像在我的打印 div id 的 html 中，我需要在我的标题中关闭图像，直到打印图像悬停在上面
不管你用id还是类名来选择元素
您的意思是当您从 div 中删除鼠标时，应该删除图像？而且您也不希望在css中使用该图像？对吗？
哈！抱歉，这很难解释。所以我在一个名为 print 的 div id 中有一个图像，我希望当我将鼠标悬停在该图像上时，背景图像会出现在一个完全不同的名为 headerright 的 div 中

【解决方案2】：

试试

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

然后定义一个css样式

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

演示：Fiddle

【讨论】：

对不起。我对网页设计很陌生，这是我的第一个网站。那么我会在你放类名的地方写我的身份证名吗？我应该做 addid 吗？还是我需要从 ID 更改为班级？

【解决方案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..

【讨论】：

非常感谢。它不起作用，但东西移动了，所以我确定我错过了一些东西

【解决方案4】：

创建一个新类

 .backgroungEG {

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


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

我希望这有效..

【讨论】：

要更改的类和背景图像是否也需要在我的 html 中？
您可以将该类保存在您的 html 或 css 中。如果您放入 css，您可以在多个 html 页面中使用它。