jquery - Jquery - 同时更改更多背景

Question

我正在使用四个 DIV，如下所示：

<div class"first">1</div>
<div class"second">2</div>
<div class"third">3</div>
<div class"fourth">4</div>

如果光标位于“第二个”DIV 上，则该 DIV 的背景应该与前一个 div（“第一个”）的背景一样发生变化。此外，如果光标悬停在“第三个”DIV 上，前一个（“第一个”和“第二个”）都应该改变背景颜色。如果光标在 div “fourth” 上，前三个 DIV（“first”、“second”和“third”）应该改变背景。

我怎样才能使用 Jquery 做到这一点？

Answer 1

我建议如下：

$('div').hover(
function(){
    $(this).prevAll().css('background-color','#f00');
},
function(){
    $(this).prevAll().css('background-color','#fff');
});

JS 小提琴演示。

请注意，您的 HTML 需要=介于 theclass和"first"(etc) 之间。

Answer 2

===已编辑===

jsfiddle：http: //jsfiddle.net/sw9YV/10/

试试这个html：

 <div id="group1">
    <div class="first hoverMe">1</div>
    <div class="second hoverMe">2</div>
    <div class="third hoverMe">3</div>
    <div class="fourth hoverMe">4</div>
</div>
<br /><br /><br />
<div id="group2">
    <div class="first hoverMe">1</div>
    <div class="second hoverMe">2</div>
    <div class="third hoverMe">3</div>
    <div class="fourth hoverMe">4</div>
</div>​

这个js：

 $(".hoverMe").mouseover(function(){
    $(this).css("background-color","#d3d3d3"); 
    $(this).prevAll(".hoverMe").css("background-color","#d3d3d3");
});

$(".hoverMe").mouseout(function(){
   $(this).css("background-color",""); 
   $(this).prevAll(".hoverMe").css("background-color","");
});
​