鼠标悬停后，如何才能在鼠标悬停位置右下方弹出个装有N个链接的框。求代码啊。。急。。。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.4.1.js"></script>
    <script type="text/javascript">
    
     

        $(function () {
            var x = 10;
            var y = 20;
            $("#dongbei").mouseover(function (e) {
                $("#showdongbei").show(); $("#showdongbei").css({
                    "top": (e.pageY + y) + "px",
                    "left": (e.pageX + x) + "px"
                }).show("fast");
            }).mouseout(function () { 
            
            })
        })        function doit(obj,e) {
            var divs = $("#showhid div")
            for (var i = 0; i < divs.length; i++) {
                divs[i].style.display = "none";
            }
          
            var height = $("#aaa").height()+$("#showdongbei").height()+$("#daqu").height();                if ($(obj).css("display") == "none") {
                    $(obj).show(); $(obj).css({
                        "top": (height) + "px",
                        "left": (e.pageX) + "px"
                    }).show("fast");
                } else {
                    $(obj).style.display = "none";
                }
            }
            function doits(obj, e) {
                $(obj).mouseleave(function () {
                    $(obj).hide();
                })
               
            }
           
            
            
    </script>
</head>
<body><div id="showdongbei" style=" display:none; position:absolute; background-color:Blue;">
    <table>
    <tr>
    <td>沈阳、大连、吉林 </td>
    </tr>
    </table>
 </div>
    <table id="daqu">
        <tr>
            <td>
                <table>
                    <tr>
                        <td id="ahref">
                            <a href="#" id="a1" onmouseover="doit('#d1',event)">东北</a> 
                            <a href="#" id="a5" onmouseover="doit('#d2',event)">京津</a>
                            <a href="#" id="a2" onmouseover="doit('#d3',event)">上海</a> 
                            <a href="#" id="a6" onmouseover="doit('#d4',event)">华中</a>
                            <a href="#" id="a3" onmouseover="doit('#d5',event)">华南</a> 
                            <a href="#" id="a7" onmouseover="doit('#d6',event)">西北</a>
                            <a href="#" id="a4" onmouseover="doit('#d7',event)">西南</a>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    <div id="showhid">
    <div id="d1"style="display:none; position:absolute;border-width:1px,border-color:red;" onmouseover="doits('#d1',event)">
        <table>
            <tr>
                <td>
                    <a href="#">沈阳</a>、<a href="#">大连</a>、<a href="#">葫芦岛</a>
                </td>
            </tr>
        </table>
    </div>
    <div id="d2" style="display:none; position:absolute;" onmouseover="doits('#d2',event)">
        <table >
            <tr>
                <td>
                    <a href="#">北京</a>、<a href="#">天津</a>、<a href="#">塘沽</a>
                </td>
            </tr>
        </table>
    </div>
    <div id="d3" style="display:none; position:absolute;" onmouseover="doits('#d3',event)">
        <table>
            <tr>
                <td>
                    <a href="#">上海</a>、<a href="#">宝山</a>、<a href="#">崇明</a>
                </td>
            </tr>
        </table>
    </div>
    <div id="d4" style="display:none; position:absolute;" onmouseover="doits('#d4',event)">
        <table>
            <tr>
                <td>
                    <a href="#">华中</a>、<a href="#">华中</a>、<a href="#">华中</a>
                </td>
            </tr>
        </table>
    </div>
    <div id="d5" style="display:none; position:absolute;" onmouseover="doits('#d5',event)">
        <table>
            <tr>
                <td>
                    <a href="#">华南</a>、<a href="#">华南</a>、<a href="#">华南</a>
                </td>
            </tr>
        </table>
    </div>
    <div id="d6" style="display:none; position:absolute;" onmouseover="doits('#d6',event)">
        <table>
            <tr>
                <td>
                    <a href="#">西北</a>、<a href="#">西北</a>、<a href="#">西北</a>
                </td>
            </tr>
        </table>
    </div>
    <div id="d7" style="display:none; position:absolute;" onmouseover="doits('#d7',event)">
        <table>
            <tr>
                <td>
                    <a href="#">西南</a>、<a href="#">西南</a>、<a href="#">西南</a>
                </td>
            </tr>
        </table>
    </div>
    </div>
</body>
</html>

解决方案 »

  1.   

    jquery 的 Hide()是隐藏的，show()方法是显示的。
      

  2.   

    改成如下 将e.pagex改成 e.clientX  "left": (e.clientX) + "px"
    这样就可以了 如果想继续修改位置可以加数字
    "left": (e.clientX) +100+ "px"
    或者
    "left": (e.clientX) -100+ "px"这是设置宽 高度应该你会吧？都差不多 
      

  3.   

    事先隐藏这个实现了，就是鼠标悬停后显示隐藏的div时，位置不理想，我希望是在鼠标当前悬停位置的右下方。
      

  4.   

    写了个小例子 <div id="shen">省</div>
    <br/>
    <div id="showDiv" class="hide_div">
    <a href="#">吉林</a>
    <a href="#">长春</a>
    <a href="#">辽宁</a>
    </div> $(document).ready(function(){
                  //进入显示登录窗口
                 $("#shen").mouseover(function(e){
                  var _div=$("#showDiv");
    var div_width=_div.width();
    var div_height=_div.height();
    var x=e.clientX;
    var y=e.clientY;
    _div.css({position:'absolute',left:x,top:y});
    _div.show();
                 });
          });
      

  5.   


    div{border:1px solid green;font-size:12px; width:100%;height:150px;}
    .hide_div{
    display:none;
    position:absolute;
    width:100px;
    height:100px;
    }