0

次のような 4 つの DIV を使用しています。

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

カーソルが「2 番目」の DIV の上にある場合、その DIV の背景は、前の div (「最初」) の背景と同様に変更されます。また、カーソルが「3 番目」の DIV の上にある場合、前の (「1 番目」と「2 番目」) 両方の DIV の背景色を変更する必要があります。カーソルが div "fourth" の上にある場合、前の 3 つの DIV ("first"、"second"、および "third") は背景を変更する必要があります。

Jqueryを使用してそれを行うにはどうすればよいですか?

4

2 に答える 2

4

次のことをお勧めします。

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

JS フィドルのデモ。

また、HTML にはと(など)の=間にが必要であることに注意してください。class"first"

于 2012-04-29T16:38:10.680 に答える
0

===編集済み===

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","");
});
​
于 2012-04-29T16:40:39.230 に答える