javascript - jQuery - 悬停时定位以前的（相同的）div？

Question

我连续有5个div。他们在页面加载时都有 1 个背景。我想改变悬停的div的BG，以及之前所有相同的div。我不知道该怎么做

div { style="background: url(images/red)"}

<div class="myDiv">One</div>
<div class="myDiv">Two<div>
<div class="myDiv">Three</div>
<div class="myDiv">Four</div>
<div class="myDiv">Five</div>

所以当上面的 div 3 悬停时，我希望 div ONE、TWO 和 THREE 有蓝色背景。

如果我这样做了

$('.myDiv').hover(function(){
    $(this).prev('.myDiv').css({...});
});

它只会影响前一个。谁能指出我正确的方向？

Answer 1

这是Javascript：

$('.myDiv').hover(function(){
    $(this).prevAll('.myDiv').andSelf().css({...});
});

而且您的标记也有错误，第二个 div 没有关闭。：

<div class="myDiv">One</div>
<div class="myDiv">Two</div>
<div class="myDiv">Three</div>
<div class="myDiv">Four</div>
<div class="myDiv">Five</div>

工作示例：http: //jsfiddle.net/snynL/

Answer 2

kmb385 有正确的答案...要解释他的答案，您可以取消设置 mouseout 的背景。

小提琴

$('.myDiv').on({
    mouseover: function(){
    $(this).prevAll().andSelf().css("background", "red");
    },
    mouseout: function(){
    $('.myDiv').css("background", "");
    }
});