Question

我在悬停任何锚标签时显示/隐藏任何div时面临一个小问题。

目前我尝试使用Mouseenter和MouseLeave功能，但它不顺畅。

可点击链接：<a class="clickmeToSeeDiv" href="##"></a>

JS代码：

    $('.clickmeToSeeDiv').live("mouseenter",function(){
        $('.leftborderActive').show();
    });
    $('.clickmeToSeeDiv').live("mouseleave",function(){
        $('.leftborderActive').hide();          

    });

以上代码有时候工作有时没有。如果您有任何想法或更好的解决方案，请建议。

由于假

Answer 1

不推荐使用

直播活动，而是使用.on()（将一个或多个事件的事件处理函数附加到所选元素）。

试试这个：

$(document).ready(function(){
    $(".leftborderActive").hide(); // hide div on DOM ready
    $( ".clickmeToSeeDiv" ).mouseenter(function() { // anchor mouseover event
        $(".leftborderActive").show(); // show div
    }).mouseleave(function() { //anchor mouseleave event
        $(".leftborderActive").hide(); //hide div
    });
});

<强> DEMO

或

$(document).ready(function(){
     $(".leftborderActive").hide();
    $(document).on('mouseenter mouseleave','.clickmeToSeeDiv',function(){
        $('.leftborderActive').toggle();
    });
});

Answer 2

不推荐使用'live'方法，而是使用'on'。

$(document).on('mouseenter mouseleave', '.clickToSeeDiv', OnDivClick);

function OnDivClick(){
    $('.clickToSeeDiv').toggle();
}

Answer 3

您可以尝试使用JQuery的动画功能或在节目上设置一个计时器并隐藏方法，以便它们使div操作更加平滑。

此外，请确保在调用enter或leave方法时取消之前的所有事件，以便动画不会叠加。

如何在悬停到任何链接时显示/隐藏div

3 个答案: