jQuery 隐藏显示 id

Question

HTML

<ul id="menüü">  
            <li id="meist">  
                <p><a href="meist.html">Meist</a></p>  
            </li> </ul>


<div id="submenu">
    <ul id="submeist">
        <li class="asi1">
            Asi 1
        </li>
        <li class="asi2">
            Asi 2
        </li>
        <li class="asi3">
            Asi 3
        </li>
    </ul>
</div>

CSS

#meist {  
        display: inline;
        float:left;
        width:180px;  
        height:50px;  
        color:#191919;  
        text-align:center;  
        overflow:hidden; 
        background:#990000;
        -moz-border-radius-top-left: 50px;
        border-top-left-radius: 50px;

    } 

#submeist
    {   
        font-size:12px;
        display:none;
    }

    #submeist .asi1
    {
        margin-left:70px;
    }

        #submeist .asi2
    {
        margin-left:25px;
    }

    #submeist .asi3
    {
        margin-left:25px;
    }

JS

$("#meist").mouseout(function () { 
    $("#submeist").hide();
    return false; 
});

$("#meist").mouseenter(function () { 
    $("#submeist").show();
    return false; 
});

我又来这里学习和了解如何在鼠标悬停在“meist”时显示“submeist”。我已经学习了一些 jQuery 的非常基础知识，但不知何故这段代码不起作用。非常感谢您的帮助，如果可能的话，请多多评论 :)

Answer 1

你应该使用 mouseleave而不是 mouseOut因为即使将鼠标悬停在 a 上也会触发 mouseOut或 p在里面 #meist .

$(function(){
    $("#meist").mouseleave(function () { 
        $("#submeist").hide();
        return false; 
    });

    $("#meist").mouseenter(function () { 
        $("#submeist").show();
        return false; 
    });
});

Demo

来自 Doc

The mouseleave event differs from mouseout in the way it handles event bubbling. If mouseout were used in this example, then when the mouse pointer moved out of the Inner element, the handler would be triggered. This is usually undesirable behavior. The mouseleave event, on the other hand, only triggers its handler when the mouse leaves the element it is bound to, not a descendant. So in this example, the handler is triggered when the mouse leaves the Outer element, but not the Inner element.

事件对是:

mouseover-mouseout

mousenter-mouseleave (悬停)