javascript - 悬停空div时如何更改不同的div背景img？

Question

希望您能提供帮助，并且可以做到这一点...

我有这样的东西：http: //jsfiddle.net/keG6G/5/

这是 HTML 代码：

<div id="logo">
     <div id="drop1">
     </div>

     <div class="clear"></div>

     <div id="drop2">
     </div>

     <div id="drop3">
     </div>
</div>

<div id="words">
    <div id="a">
    </div>

    <div id="b">
    </div>

    <div id="c">
    </div>
</div>

<div id="logo">只有一个背景图像。

<div id="drop1">,<div id="drop2">并且<div id="drop2">是透明的（显示边框以使其可见）。

div'a'、'b' 和 'c' 有背景图像。

我需要做的是：当悬停'drop1'，'drop2'或'drop3' div时，div'logo'的背景img将与div'a'，'b'和'c'的背景img一起改变.

所以为了更清楚，如果我悬停div'drop1': div'logo', div'a',div'b'并且div'c'会改变背景图像。

一旦我不太了解它，我不确定它是否最好使用 jQuery。

我希望我能很好地解释我的问题。

Answer 1

使用以下 jquery 代码

$('#drop1,#drop2,#drop3').hover(
  function(){
    $('#a').css({"background-color":"blue"});
    $('#b').css({"background-color":"red"});
    $('#c').css({"background-color":"green"});
    $('#logo').css({"background-color":"black"});
  },function(){
    //similarly give them their original backgrounds
});

如果您想将它们的背景更改为普通背景，请创建一个类 new_background 然后添加

$('#a,#b,#c,#logo').addClass("new_background");