关于鼠标悬停问题的简单 addClass

Question

我正在尝试为 li 项目设置一个类，但没有成功。我已经尝试了很多事情（要发布的内容太多），但我无法弄清楚：

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

li 项目必须在鼠标悬停（/悬停）时更改类并保持该类状态，即使鼠标悬停在外部 > ul。但是（这是棘手的部分）如果悬停另一个 li 项目，则会丢失类。这意味着悬停的项目获得“当前”类别。

希望它有意义..这是小提琴 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 中为您修复了该问题然后应用它，你会有更好的运气。