鼠标悬停问题上的简单addClass

我试图设置一个li项目的类，没有运气。我已经尝试了很多东西（得多发布），但我无法弄清楚：鼠标悬停问题上的简单addClass

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

锂项目必须改变鼠标悬停类（/悬停），并保持这一类状态，即使鼠标悬停以外 ul。但是（这是棘手的部分）如果另一个李项目被徘徊，就会失去班级。这意味着被搁置的物品获得“当前”类。

希望这使得一些sense..This是小提琴jsfiddle

来源

2011-06-01 Youss

我添加了代码....它不是太多张贴;） – 2011-06-01 20:29:27

您应该从所有，目前有它的元素将其添加到新的元素之前删除类：

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

或者，每Felix的好主意，

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

jsFiddle

来源

2011-06-01 20:26:23 lonesomeday

谢谢:)我希望我是这样的好，会为我节省很多头痛。 – Youss 2011-06-01 20:29:42

甚至更好：存储对具有“当前”类的元素的引用。 – 2011-06-01 20:32:01

@Felix是的，很好的解决方案 - 添加到我的答案。 – lonesomeday 2011-06-01 20:36:01

只需删除来自兄弟姐妹的课程：

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

来源

2011-06-01 20:27:44

谢谢，寂寞日子已经帮我解决了问题 – Youss 2011-06-01 20:31:33

我已经在小提琴中为你解决了它，如果你从当前所有的元素中移除当前的类然后应用它，你将会有更好的运气。

来源

2011-06-01 20:27:50

谢谢，寂寞日子已经帮我解决了这个问题。 – Youss 2011-06-01 20:31:19

鼠标悬停问题上的简单addClass

回答

相关问题