Javascript jQuery悬停多个块

我使用jQuery hover函数将鼠标悬停在

框empty

类上。在悬停时，它将

框空

替换为

框满

在将鼠标悬停在一个块上时，如何将鼠标悬停在所有以前的块上

单击块时，如何将类

框满

添加到所有以前的块

编辑： 抱歉，我忘了提及我需要包括已单击/悬停的块（不仅仅是以前的块）

这是我的密码：

HTML:

<div class="wrap"> 
    <span class="box box-empty"></span>
    <span class="box box-empty"></span>
    <span class="box box-empty"></span>
    <span class="box box-empty"></span>
</div>

$('.box-empty').hover(function () {
        $(this).addClass('box-full');
        $(this).removeClass('box-empty'); 
    }, function () {
        $(this).addClass('box-empty');
        $(this).removeClass('box-full');
    });

演示：

---

您需要使用

prevAll（）

。您还需要

addBack（）

来包含当前悬停的元素。试试这个：

$('.box-empty').hover(function () {
    $(this).prevAll().addBack().toggleClass('box-full box-empty');
});

注意：我还通过使用

toggleClass

简化了代码，这意味着相同的函数可以在

mouseenter

和

mouseleave

上运行，在

悬停

纯CSS路径中：

span:hover ~ span, span:hover {
    border: 1px solid #000;
    background: #000;
}

---

正如法布里西奥·马特（Fabricio Matté）在下面提到的，你可以利用CSS复选框的漏洞，让你有效地在选中/未选中之间切换。

OP只想突出显示悬停在左边的那些，我认为这不可能出现在CSS中。@Rorymcrossan我能够弄清楚：。。只是对CSS中的点击功能无能为力，所以毫无用处。@Fabricio MattéAwesome-完全忘记了复选框黑客。你应该把它作为一个答案。不，这有点太草率了（凌乱的HTML，没有我要感谢你这么多的答案和改进我的代码。对不起，我忘了提到，我还需要包括已单击/悬停的div（不仅仅是以前的那些）@user1251698这就是它应该做的。它对你不起作用吗？@Rorymcrossan这就是它正在做的。我用小提琴做它，这样当鼠标离开时，酒吧就保持它的状态。这不是OP要求的，但可能是他想要的。谢谢，它起作用了。我刚刚用andSelf替换了addBack。@DanRoss也非常感谢你，是的，这是我一直在寻找的东西。：@user1251698很高兴您能让它工作，不过您应该注意到，从jQuery 1.8开始，

和self（）

被弃用，取而代之的是

addBack（）

：

$('.box').hover(
    function () {
        $('.box:lt(' + ($(this).index() + 1) + ')').toggleClass('box-full box-empty'); 
    }, 
    function () {
        $('.box:lt(' + ($(this).index() + 1) + ')').toggleClass('box-empty box-full');
}
);