Простой addClass при наведении мыши

Question

Я пытаюсь установить класс для элемента li, но безуспешно.Я перепробовал много вещей (чтобы многое опубликовать), но не могу понять:

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

Элемент li должен менять класс при наведении курсора (/ hover) и сохранять это состояние класса, даже еслимышь зависает снаружи ул.Но (и это самая сложная часть) потерять класс, если будет найден другой элемент li.А это значит, что находящийся предмет получает класс '' current ''.

Надеюсь, это имеет какой-то смысл ... Это скрипка 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 и затем примените его, вам повезет больше.

Answer 3

Просто удалите класс из его братьев и сестер:

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