鼠標懸停問題上的簡單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

回答

相關問題