1

我想我有一个简单的问题，但我看不到解决方案。当我用鼠标输入“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");
    });
});
4

5 回答 5

1

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

于 2012-09-11T09:45:58.607 回答
0

试试这个

$(document).ready(function(){
$("div#one").mouseover(function() {
    $("div#oneX").slideDown("normal");
});
$("div#oneX").mousedown(function() {
    $("div#oneX").slideUp("normal");
   });
});
于 2012-09-11T09:44:47.203 回答
0

试试这个
工作演示链接http://codebins.com/bin/4ldqp7d

$("div#one").mouseenter(function() {
        $("div#oneX").slideDown("normal");
    });
    $("div#oneX").mouseleave(function() {
        $("div#oneX").slideUp("normal");
    });
于 2012-09-11T09:47:45.440 回答
0

像这样给

$("div#one").mouseenter(function() {
    $("div#oneX").slideDown("normal");
});
$("div#oneX").mouseleave(function() {
    $("div#oneX").slideUp("normal");
});
于 2012-09-11T09:51:03.970 回答
0

jsBin 演示

$(".menuTop").on('mouseenter mouseleave',function( e ) {
    var $ch = $(this).find('.menuPointCon');
    var evt = e.type=='mouseenter' ? $ch.slideDown() : $ch.slideUp();
});
于 2012-09-11T09:53:23.280 回答