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

Question

我在悬停任何 anchor 标记时显示/隐藏任何 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();
    });
});