Изменить CSS класс на все предыдущие <li>, когда я наведу курсор на другой элемент

Question

то, что мне нужно, может быть довольно просто сделать с помощью jQuery, я просто сосу это: /

У меня есть список неупорядоченных списков лет, что я хочу сделать, это изменить ВСЕ классы CSSпредыдущих элементов списка при наведении на него другого элемента.

Например, на этом рисунке ниже, если я наведу указатель мыши на «1904», я хочу изменить класс css на 1901, 1902 и 1903.

альтернативный текст http://i32.tinypic.com/33x9c0z.png

Answer 1

Вы можете использовать .prevAll(), чтобы получить всех предыдущих братьев и сестер, а затем использовать .toggleClass(), чтобы добавить / удалить класс на .hover(), например, это:

$("li").hover(function() {
  $(this).prevAll("li").toggleClass("myClass");
});

Вы можете попробовать его здесь обратите внимание, что он не стилизует элемент hovered, только предыдущие, если вы хотите также стилизовать hovered <li> вы можете сделать это :

$("li").hover(function() {
  $(this).prevAll("li").andSelf().toggleClass("myClass");
});

В этом случае мы используем .andSelf(), чтобы включить <li>, находящегося в комплекте.