jquery------.mouseover()和.mouseout()的高级效果使用

<div style="width:100%;height:40px;background-color:#aaa;position:absolute;">
<div id="showall" style="text-align:center;line-height:40px;left:600px;width:100px;height:40px;background-color:pink;position:absolute">显示空间</div>
</div>
<div id="all" style="left:600px;width:100px;height:100px;display:none;position:absolute">
<div id="area1" style="line-height:40px;text-align:center;width:100px;height:40px;background-color:#eee;">显示空间</div>
<div id="area2" style="width:96px;height:80px;background-color:#fff;border:2px solid #eee">
<table border="0" cellspacing="0" >
<tr>
<td  style="text-align:center;width:96px;height:30px;border:1px solid #fff">服装</td>
</tr>
<tr>
<td  style="text-align:center;width:96px;height:30px;border:1px solid #fff">首饰</td>
</tr>
</table>
</div>
</div>

$(document).ready(function(){
$("#showall")
.mouseover(function(){
$("#all").show();
});

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