Question

我正在尝试为li项设置一个类，没有运气。我尝试过很多东西（要发布很多内容），但我无法弄清楚：

$("li").live("mouseover",function(){
    $(this).addClass('current');
});

li项目必须在鼠标悬停时更改类（/ hover）并保持该类状态，即使鼠标悬停在外面 ul。但是（这是一个棘手的部分）如果另一个项目徘徊，就会失去这个课程。这意味着正在悬停的项目将获得“当前”类。

希望它有道理......这是小提琴jsfiddle

Answer 1

在将类添加到新元素之前，应该从当前拥有它的所有元素中删除该类：

$("li").live("mouseover", function() {
    $('.current').removeClass('current');
    $(this).addClass('current');
});

jsFiddle

为了进行额外的优化（即保存$('.current')选项，这在某些较旧的浏览器中可能很昂贵），您可以检查悬停的元素是否已经具有该类：

$("li").live("mouseover", function() {
    if (!$(this).hasClass('current')) {
        $('.current').removeClass('current');
        $(this).addClass('current');
    }
});

或者，根据费利克斯的好主意，

var current;
$("li").live("mouseover", function() {
    if (this !== current) {
        $(current).removeClass('current');
        $(this).addClass('current');
        current = this;
    }
});

jsFiddle

Answer 2

只需从其兄弟姐妹中删除该类：

$("li").live("mouseover",function(){
    $(this).addClass('current');
    $(this).siblings().removeClass("current");
  });

Answer 3

如果您从所有li元素中删除当前类然后应用它，我已经在小提琴fiddle中为您修复了它，您将获得更好的运气。

鼠标悬停问题上的简单addClass

3 个答案: