鼠标移入移出的代码

        .menu-box{
            float: left;
            margin-right: 100px;
            position: relative;
            background-color: red;

        }
        .show-box{
            display: none;
            position: absolute;
            left: 0;
            top:17px;
            background-color: pink;
            width: 100px;
            height: 100px;
        }


    <div class="menu-box" id="J_menu_box1">
        <a href="#">移上来</a>
        <div id="J_show_box1" class="show-box">
            显示的东西1
        </div>
    </div>
    <div class="menu-box" >
        <a id="J_menu_box2" class="menu-box2" href="#">移上来</a>
        <div id="J_show_box2" class="show-box">
            显示的东西2
        </div>
    </div>

        $("#J_menu_box1").mouseover(function(){
            $("#J_show_box1").show();
        });
        $("#J_menu_box1").mouseout(function(){
            $("#J_show_box1").hide();
        })

        $("#J_menu_box2").mouseover(function(){
            $("#J_show_box2").show();
        });
        $("#J_menu_box2").mouseout(function(ev){
            if(!$(ev.relatedTarget).hasClass("show-box")){
                $("#J_show_box2").hide();
            }
        });
        $("#J_show_box2").mouseout(function(ev){
            if(!$(ev.relatedTarget).hasClass("menu-box2")){
                $("#J_show_box2").hide();
            }
        });

mouseover mouseout事件中有relatedTarget,是鼠标移入移出时的相关对应元素