javascript - 如何在悬停空 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'和div的背景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");