一个页面 - jQuery - mouseenter 和 mouseleave - 如果点击了则跳过 mouseleave

Question

我在单页中使用了一个固定的顶部导航列表，效果很好。

我使用jQuery颜色插件添加了mouseenter和mouseleave颜色动画，也很好用。

现在我想要在链接被点击时跳过mouseleave事件，但我不知道如何实现。我尝试了这里找到的所有方法，但还是没有我喜欢的结果。我对JavaScript / 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*

});

（无需翻译）

- mkr

Answer 1

在鼠标离开事件中，您只需检查元素上是否存在“active”类，并且不执行任何操作。

$('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);
});

编辑 这是一个重新制定的CSS + JS解决方案。使用CSS :hover和CSS3转换来实现鼠标进入/离开效果，而使用JS来实现单击切换。

http://jsfiddle.net/tdV2g/

你在IE9中无法获得0.4秒的颜色过渡效果，但在所有现代浏览器中都可以使用。

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);
});

- Louis Ricci

---

这个很好用，谢谢！现在我注意到，点击新项目不会从其他链接中删除“ .active”类？有什么帮助吗？ - mkr

现在明白了，刚刚清除了内联样式： $('.scroll').css('background-color', '').css('color', ''); - mkr

@mkr - 很高兴你解决了它。 - Louis Ricci

谢谢，但现在我有另一个问题。您可以在这里检查：www.pixelschneiderei.de当单击一个链接并快速悬停所有其他导航链接时，有些链接保持点击状态。似乎对它们不起作用的是mouseleave。有什么想法吗？ - mkr

@mkr - 是的，你可以使用CSS平滑地对颜色进行动画处理。我已经更新了我的答案。 - Louis Ricci

Answer 2

简单地添加

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

在你的 $('ul li a.scroll').click({ .. }); 中。

- Geo

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'); 
});

- Debasish Chowdhury