Один пейджер - jQuery - mouseenter и mouseleave - пропустить mouseleave при нажатии

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

Я добавил цветную анимацию 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);

});

});

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

С уважением и благодарностью, mkr*


click jquery mouseenter mouseleave
person mkr    schedule 11.02.2013    source источник

Ответы (3)


arrow_upward
1
arrow_downward

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

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

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

person Geo    schedule 11.02.2013

arrow_upward
1
arrow_downward

В вашем 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 используются для эффекта мыши[войти/оставить], а JS используется для переключения кликов.

http://jsfiddle.net/tdV2g/

Вы не получите 0,4-секундный переход цвета в 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);
});
person Louis Ricci    schedule 11.02.2013
comment
Это отлично работает, спасибо! Теперь я заметил, что нажатие на новый элемент не удаляет класс '.active' из других ссылок? Любая помощь здесь:)? - person mkr; 11.02.2013
comment
Понял, просто очистил встроенные стили: $('.scroll').css('background-color', '').css('color', ''); - person mkr; 11.02.2013
comment
@mkr - рад, что ты понял это - person Louis Ricci; 11.02.2013
comment
Спасибо, но теперь у меня другая проблема. Вы можете проверить здесь: www.pixelschneiderei.de При нажатии на одну ссылку и быстром наведении на все остальные навигационные ссылки некоторые остаются в статусе щелчка. Кажется, что mouseleave не работает для них. Есть идеи? - person mkr; 12.02.2013
comment
@mkr - вы можете рассмотреть возможность использования CSS :hover вместо нацеливания на события mouse[enter/leave] в вашем JavaScript. В то время как mouse[enter/leave] должен вести себя предсказуемо, я видел странные причуды, когда веб-страница была увеличена или пользователь изменил настройки чувствительности мыши и т. д. - person Louis Ricci; 12.02.2013
comment
Хорошо, но есть ли способ плавно изменить цвет с помощью css? Я так не думаю. Проблемы с масштабированием возникают позже, просто сначала нужно протестировать javascript. ;) Я не знаю, что вы имеете в виду под настройками чувствительности мыши? Как всегда, спасибо за помощь :) - person mkr; 12.02.2013
comment
@mkr - Да, вы можете плавно анимировать цвет с помощью CSS. Я обновил свой ответ. - person Louis Ricci; 12.02.2013

arrow_upward
0
arrow_downward

Попробуй это,

$('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'); 
});
person Debasish Chowdhury    schedule 11.02.2013