当我悬停其他一些项目时,更改以前所有<li>的CSS类

Question

我需要什么,用jQuery做起来可能很简单,我只是吮吸它:/

我有这个无序列表的年份列表,我想要做的是,当我悬停另一个项目时更改以前列表项的所有css类.

例如,在下图中,如果我将鼠标置于"1904",我想更改1901,1902和1903的css类.

替代文字http://i32.tinypic.com/33x9c0z.png

Answer 1

您可以使用.prevAll()以获取所有以前的兄弟,然后使用.toggleClass()添加/删除类.hover(),如下所示:

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

你可以尝试一下这里注意它没有设计悬停元素的样式,只有前面的元素,如果你想要设置悬停的样式<li>,你可以这样做:

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

在这种情况下,我们正在使用.andSelf()包含<li>在集合中的悬停.