Один пейджер - jQuery - mouseenter и mouseleave - пропустите мышь, если щелкнули

Question

У меня есть верхний фиксированный список навигации в одном пейджере, отлично работает.

Я добавил анимацию цвета mouseenter и mouseleave с плагином цвета jQuery, отлично работает.

Теперь я хочу пропустить mouseleave, если ссылка нажата, но я не понимаю. Я попробовал все, что нашел здесь, но все равно никакого результата мне не понравилось. Я действительно новый JavaScipt/jQuery, так что было бы хорошо, если бы вы могли объяснить его новичком;).

Мой навигации HTML код:

<nav> 
    <ul> 
     <li class="xyz"><a href="#home" class="scroll">Home</a></li> 
     <li class="xyz"><a href="#leistungen" class="scroll">Leistungen</a></li> 
     <li class="xyz"><a href="#referenzen" class="scroll">Referenzen</a></li> 
     <li class="xyz"><a href="#me" class="scroll">Über Mich</a></li> 
     <li class="xyz"><a href="#kontakt" class="scroll">Kontakt</a></li> 
    </ul> 
</nav> 

Мой JQuery код здесь:

$(function() { 

$('ul li a.scroll').on('mouseenter', function() { //Wenn Maus über .teaser 
    $(this).stop().animate({ 
     'color': 'white', 
     'background-color': '#468592', 
    }, 400); 
}); 

$('ul li a.scroll').on('mouseleave', function() { 
     $(this).stop().animate({ 
      'color': '#666666', 
      'background-color': 'white', 
    }, 400); 
}); 

$('ul li a.scroll').click(function(event) { 
    $('.scroll').removeClass('active'); 
    $(this).addClass('active'); 
    event.preventDefault(); 
    $('html,body').stop().animate({ 
     scrollTop: $(this.hash).offset().top 
    }, 1000); 

}); 

});

Вы можете помочь мне с этой проблемой? Я пробовал это через два дня, но без результата.

С уважением и спасибо, МКР *

Answer 1

В вашем MouseLeave вам просто нужно проверить, если «активный» класс существует на элементе и ничего не делать.

$('ul li a.scroll').on('mouseleave', function() { 
    if($(this).hasClass("active")) 
     return; // do nothing because it's active 
    $(this).stop().animate({ 
      'color': '#666666', 
      'background-color': 'white', 
    }, 400); 
}); 

EDIT Вот переработан CSS + JS решение. Переходы CSS: hover и CSS3 используются для эффекта мыши [enter/leave], тогда как JS используется для переключения кликов.

http://jsfiddle.net/tdV2g/

Вы не получите переход 0.4second цвета в IE9, но и во всех современных браузерах он будет работать.

CSS

a.scroll { 
    background-color: white; 
    color: #666666; 
transition: background-color 0.4s linear, color 0.4s linear; 
-moz-transition: background-color 0.4s linear, color 0.4s linear; 
-o-transition: background-color 0.4s linear, color 0.4s linear; 
-webkit-transition: background-color 0.4s linear, color 0.4s linear; 
-ms-transition: background-color 0.4s linear, color 0.4s linear; 
} 
.scrollactive, a.scroll:hover { 
    background-color: #468592; 
    color: white; 
} 

JS (JQuery)

$("a.scroll").click(function(event) { 
    $(".scrollactive") 
     .removeClass("scrollactive") 
     .addClass("scroll"); 
    $(this) 
     .removeClass("scroll") 
     .addClass("scrollactive"); 
    event.preventDefault(); 
    $('html,body').stop().animate({ 
     scrollTop: $(this.hash).offset().top 
    }, 1000); 
}); 

Answer 2

просто добавить

$(this).unbind('mouseleave'); 

внутри $('ul li a.scroll').click({ .. });

Answer 3

Попробуйте,

$('ul li a.scroll').on('mouseenter', function() { //Wenn Maus über .teaser 
    $(this).stop().animate({ 
    'color': 'white', 
    'background-color': '#468592' 
    }, 400); 

}); 

$('ul li a.scroll').on('mouseleave', function() { 
    $(this).stop().animate({ 
     'color': '#666666', 
     'background-color': 'white' 
}, 400); 

}); 


$('ul li a.scroll').one('click', function() { 
    // If you want to stop mouseleave on every anchor tag 
    $('ul li a.scroll').unbind('mouseleave'); 
    // If you want to stop mouseleave for that specific anchor tag 
    // $(this).unbind('mouseleave'); 
});