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

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

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

Updated fiddle

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

Answer 2

一个纯CSS的方法：

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

jsFiddle here

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

Answer 3

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