JQuery 下拉鼠标悬停

Question

我想我有一个简单的问题，但我看不到解决方案。 当我用鼠标输入“one”-div(仅菜单顶部!)时，它会正确展开，但如果我用鼠标移出“one”-div，它就会崩溃，但它不应该!我把我的 JS 文件放在它应该首先折叠，如果我鼠标离开“oneX”-div(菜单点的容器!)

这里是代码: HTML

<div id="root">
            <div style="height:50px;width:100%;"></div>
                <div id="one" class="menuTop">
                    <div style="clear:both;position:absolute;">
                        <div id="oneX" class="menuPointCon">
                            <div class="menuTopHover">Oh shit</div>
                            <div class="menuPoint">awefwafe</div>
                            <div class="menuPoint">wqdwaed</div>
                            <div class="menuPoint">gsregser</div>
                        </div>
                    </div>
                </div>
                <div id="two" class="menuTop">
                    <div style="clear:both;position:absolute;">
                        <div id="twoX" class="menuPointCon">
                            <div class="menuTopHover">Oh shit</div>
                            <div class="menuPoint">awefwafe</div>
                            <div class="menuPoint">wqdwaed</div>
                            <div class="menuPoint">gsregser</div>
                        </div>
                    </div>
                </div>
                <div id="three" class="menuTop">
                    <div style="clear:both;position:absolute;">
                        <div id="threeX" class="menuPointCon">
                            <div class="menuTopHover">Oh shit</div>
                            <div class="menuPoint">awefwafe</div>
                            <div class="menuPoint">wqdwaed</div>
                            <div class="menuPoint">gsregser</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

CSS

#root {
    width:600px;
    height:300px;
    background-color:red;
}
.menuTop {
    float:left;
    width:200px;
    height:50px;
    background-color:blue;
}
.menuPointCon {
    position:relative;
    background-color:green;
    display:none;
}
#one {
}
#two {
}
#three {
}
#oneX{
}
#twoX{
}
#threeX {
}
.menuTopHover {
    position:relative;
    width:200px;
    height:50px;
    color:white;
}
.menuPoint {
    position:relative;
    width:200px;
    height:50px;
    color:white;
}

jQuery/JS

$(document).ready(function(){
    $("div#one").mouseenter(function() {
        $("div#oneX").slideDown("normal");
    });
    $("div#oneX").mouseout(function() {
        $("div#oneX").slideUp("normal");
    });
});

Answer 1

我认为你应该使用 mouseleave() 而不是 mouseout()