.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,是鼠标移入移出时的相关对应元素