Question

我的jQuery代码有点问题。

这是我的代码：

$("#bloc-search").click(function(){
        $(this).toggleClass("bloc-search-highlight");
        //var jObj = $( this );
});

if ( $("#formulaire-search").is(':visible')){   

    $('.search').attr('src', '/img/search-blanc.png');

} else {

    $("#bloc-search").hover(
        function(){
           $('.search').attr('src', '/img/search-blanc.png');
        }, function(){
           $('.search').attr('src', '/img/search-blue.png');
    });

}

它几乎完美无缺，但我的问题是，当我的＃formulaire-search可见时，悬停功能仍在工作，我不知道为什么，因为在我的情况下，如果我没有悬停功能。我也尝试过使用hasClass而不是看不见......

一个想法？

感谢您的帮助; - ）

Answer 1

你可以试试这个：

if ( $("#formulaire-search").is(':visible')){
  $("#bloc-search").unbind('mouseenter mouseleave');
  ... other stuff ...
} else {
  $("#bloc-search").bind('mouseenter mouseleave'); // to be sure
  ... other stuff ...
}

当您需要悬停功能时，您可能需要重新绑定它

<强>更新

这样可行 - 使用mouseenter和mouseleave效果很好，也可以原生工作

if ( $("#formulaire-search").is(':visible')){   

    $('.search').attr('src', '/img/search-blanc.png');

} else {

    // do what you want here - only works when #formulaire-search not visible     
    $("#bloc-search").on('mouseenter', function(){
           $(this).addClass('goTeal');
    });

    $("#bloc-search").on('mouseleave', function(){
           $(this).removeClass('goTeal');
    });

}

Here's a fiddle to look at

与点击和悬停动画Jquery冲突

1 个答案: