jQuery hover несколько блоков

Question

Я использую функцию наведения jQuery для зависания над классом box-empty. При зависании он заменяет box-empty на box-full.

1. При наведении курсора на блок, как я могу навешивать все предыдущие блоки?
2. При нажатии на блок, как я могу добавить класс box-full ко всем предыдущим блокам?

Edit: К сожалению, я забыл упомянуть, что мне нужно, чтобы включить блок, который был щелкнул/парить также (не только предыдущие).

Вот мой код:

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'); 
    }); 

Demo: 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ício Матовый ниже, вы можете воспользоваться CSS CheckBox хака, что позволяет эффективно переключаться между выбранными/невыбранные.

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'); 
} 
);