悬停空div时如何更改不同的div背景图像？

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'的背景img和'c'。

所以为了更清楚一点，如果我将鼠标悬停在 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");