Эффекты наведения на элемент списка

Question

В моей вертикальной навигации я хочу выделить элемент списка, который последний раз щелкнул и в данный момент активен. Выделение выполняется с назначением красного фона для элемента списка. Я также хочу выделить элемент списка при наведении мыши. Проблема заключается в зависании с другими элементами списка, я хочу временно удалить класс из активного элемента списка, а когда указатель мыши больше не включен в элемент неактивного списка, этот активный класс снова будет включен в активный элемент списка. Вот как это выглядит на JSFiddle: http://jsfiddle.net/9r3tx/2/

Это функция JQuery, которая присваивает класс активный в список элемент, который щелкнул:

//Add class active on click, firts li is active by default 
$('.navigation li:first').addClass('active'); 

$(".navigation li a").click(function(e) { 
    $('.navigation li').removeClass('active'); 
    $(this).parent().addClass('active'); 
}); 

Здесь проблема заключается в:

//Change classes on hover 
$(document).ready(function(e) { 
$(".navigation li a").hover(function(e){ 
    $('.navigation li').removeClass('active'); 
    $(this).parent().addClass('active'); 
}); 
}); 

I знайте, что это назначает класс активным для зависающей ссылки и остается таким, но я хочу временно назначить класс active, который будет длиться только в течение времени, когда указатель находится над этим списком.

Answer 1

Мое предложение было бы использовать CSS совместно с JQuery:

$('.navigation li:first').addClass('active'); 

$('.navigation li').click(function(){ 
    $(this).addClass('active').siblings('.active').removeClass('active'); 
}); 

С помощью CSS:

JS Fiddle demo.

Answer 2

Как насчет THIS простого примера, который делает именно то, что вы просите, используя mouseleave

//Add class active on click, firts li is active by default 
    $('.navigation li:first').addClass('active'); 

    $(".navigation li a").click(function(e) { 
     $('.navigation li').removeClass('active'); 
     $(this).parent().addClass('active'); 
    }); 

//Change classes on hover 
$(document).ready(function(e) { 
    $(".navigation li a").hover(function(e){ 
     $('.navigation li').removeClass('active'); 
     $(this).parent().addClass('active'); 
    }); 

    $(".navigation li a").on('mouseleave', function(e){ // this function for removing 
     $(this).parent().removeClass('active'); 
    }); 
});