使用jQuery的drop菜单不适用于鼠标悬停

时间:2014-10-05 20:23:19

标签: javascript jquery

我正在尝试做一个简单的下拉菜单来显示鼠标悬停时,此脚本会显示另一个包含链接的div。

一切正常但当我尝试选择一个链接时,另一个div隐藏。

jQuery(document).ready(function() {
    jQuery("#menu_link").mouseover(function() {

        jQuery(".1").show();

    });

  jQuery("#menu_link").mouseout(function() {

        jQuery(".1").hide();

    });

});

http://jsfiddle.net/sx8o1tbh/1/

如果你去把光标放在" Inicio"你看到它显示了另一个带有链接的div但是当我尝试去它隐藏的这个新div时,我认为jQuery代码中有些错误。

感谢您的帮助。

2 个答案:

答案 0 :(得分:1)

问题不在JavaScript代码中。我刚刚更改了你的CSS并避免了菜单和子菜单之间的差距:

#show_links
{
top:35px;
position:absolute;
min-width:10%;
width:auto;
min-height:100px;
height:auto;
border:2px solid;
}

http://jsfiddle.net/sx8o1tbh/7/

答案 1 :(得分:0)

 $(document).ready(function () {


    $("#menu_link").mouseenter (function () {

        $(".1").show();

    });

    $("#show_links").mouseleave (function () {

        $(".1").hide();

    });

     $("#menu_link").mouseleave (function () {

        $(".1").hide();

    });

});

或者这可以在jquery

中完成