Question

I’m using four DIVs that look as follows:

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

If the cursor is over the “second” DIV, background of that DIV should change as well as the background of the previous div (“first”). Also, if the cursor hover over “third” DIV both previous (“first” and “second”) should change the background color. If the cursor is over the div “fourth” the previous three DIVs (“first”, “second” and “third”) should change the background.

How can I do that using Jquery?

Answer 1

===EDITED===

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

try this 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>​

and this 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","");
});
​