Question

我在一个寻呼机中获得了一个顶级固定列表导航，工作正常。

我已经使用jQuery颜色插件添加了mouseenter和mouseleave颜色动画，也可以正常工作。

现在我想跳过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 *

Answer 1

在你的mouseleave中，你只需要检查元素上是否存在“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过渡用于鼠标[enter / leave]效果，而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);
});

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

一个寻呼机 - jQuery - mouseenter和mouseleave - 如果点击则跳过mouseleave

3 个答案: