jQuery悬停多个块

Question

我正在使用 jQuery 悬停功能将鼠标悬停在 box-empty 类上。在悬停时，它将box-empty 替换为box-full。

1. 将鼠标悬停在一个块上时，如何也将鼠标悬停在所有先前的块上？
2. 点击区块时，如何将box-full类添加到之前的所有区块中？

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

这是我的代码：

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>

jQuery：

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

演示： http://jsfiddle.net/aCP9x/

Answer 1

纯 CSS 方法：

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

jsFiddle here

正如下面 Fabrício Matté 所提到的，您可以利用 CSS 复选框 hack，让您可以有效地在选中/未选中之间切换。

Answer 2

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

Answer 3

您需要使用prevAll()。您还需要addBack() 来包含当前悬停的元素。试试这个：

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

Updated fiddle

注意，我还使用toggleClass 简化了您的代码，这意味着相同的函数可以在hover 内的mouseenter 和mouseleave 上运行。