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

index.jsp

<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>

 

my.js

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

 

效果圖

移動前：            移動后：