1个js控制DIV的问题，百分百结贴达人！

写了一个鼠标移动div上会出现1个div浮层显示移动到的div的明细，我这个浮层明细的div的大小是鼠标移动到div的2倍大小，我想让这个用于显示明细的div的上边界与左边界与鼠标移动到的这个div重合。下面是代码，有点问题，请大家帮我指点下！
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        .toopTip
        {
            background-color:Yellow;
            border-style:solid;
            border-width:1px;
            border-color:Red;
        }
    </style>
    <script language="javascript" type="text/javascript">
        function initEvent() {
            var divArray = document.getElementsByTagName("div");
            for (var i = 0; i < divArray.length; i++) {
                divArray[i].onmouseover = createDivDetailOne;
                divArray[i].onmouseout = removeDivDetail;
            }
        }
        function createDivDetailOne() {
            divObj = document.createElement("div");
            divObj.className = "toopTip";
            divObj.setAttribute("id","divDetail");
            divObj.style.position = "absolute";
            divObj.style.width = "200px";
            divObj.style.height = "200px";
            var triggerObj = window.event.srcElement;
            divObj.style.top = triggerObj.offsetTop;
            divObj.style.left = triggerObj.offsetLeft;
            divObj.innerHTML = triggerObj.innerText;
            document.body.appendChild(divObj);
        }
        function removeDivDetail() {
            var divObj = document.getElementById("divDetail");
            if(!divObj)
            {
                return;
            }
            document.body.removeChild(divObj);
        }        window.onload = initEvent;
    </script></head>
<body>
    <div id="divOne" style="background-color: Fuchsia; width: 100px; height: 100px;">
        Hello My Js World!
    </div>
    <div id="divTwo" style="background-color: Aqua; width: 100px; height: 100px">
        Welcome to My Js World!
    </div>
    <div id="divThree" style="background-color: Gray; width: 100px; height: 100px">
        THIS IS My Js World!
    </div>
</body>
</html>

解决方案 »

  1.   


        <script language="javascript" type="text/javascript">
            function initEvent() {
                var divArray = document.getElementsByTagName("div");
                for (var i = 0; i < divArray.length; i++) {
                    divArray[i].onmouseover = createDivDetailOne;
                  //  divArray[i].onmouseout = removeDivDetail;
                }
            }
            function createDivDetailOne() {
                divObj = document.createElement("div");
                divObj.className = "toopTip";
                divObj.setAttribute("id","divDetail");
                divObj.style.position = "absolute";
                divObj.style.width = "200px";
                divObj.style.height = "200px";
                var triggerObj = window.event.srcElement;
                divObj.style.top = triggerObj.offsetTop;
                divObj.style.left = triggerObj.offsetLeft;
                divObj.innerHTML = triggerObj.innerText;
                document.body.appendChild(divObj);
                document.getElementById("divDetail").onmouseout=function(){
                    if(!divObj)
                    {
                        return;
                    }
                    document.body.removeChild(divObj);
                };
            }
            function removeDivDetail() {
                return;
                
            }        window.onload = initEvent;
        </script>
      

  2.   

    移除的那应该这样啊document.getElementById("divDetail").onmouseout=function(){
                    divObj=this;
                    if(!divObj)
                    {
                        return;
                    }
                    document.body.removeChild(divObj);
                };
      

  3.   

    请问用于明细的图层div与鼠标移动的div的上边界与左边界 怎么才能重合啊！
      

  4.   

    你写的那个好象兼容不了浏览器 jquery:<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <style type="text/css">
            .toopTip
            {
                background-color:Yellow;
                border-style:solid;
                border-width:1px;
                border-color:Red;
            }
        </style>
        <script src="jquery-1.6.3.min.js" type="text/javascript"></script>
        <script language="javascript" type="text/javascript">
            $(document).ready(function(){
                $(".divs").mouseover(function(){
                    if(!$("#divDetail").is(":animated")){
                    $("#divDetail").text($(this).text());
                    $("#divDetail").width($(this).width()*2);
                    $("#divDetail").height($(this).height()*2);
                    $("#divDetail").css({"position":"absolute","top":$(this).offset().top,"left":$(this).offset().left});
                    $("#divDetail").show(400);}
                });
                $("#divDetail").mouseout(function(){
                    $(this).hide();
                });
            });
        </script></head>
    <body>
        <div class="divs" id="divOne" style="background-color: Fuchsia; width: 100px; height: 100px;">
            Hello My Js World!
        </div>
        <div class="divs" id="divTwo" style="background-color: Aqua; width: 100px; height: 100px">
            Welcome to My Js World!
        </div>
        <div class="divs" id="divThree" style="background-color: Gray; width: 100px; height: 100px">
            THIS IS My Js World!
        </div>
        <div id="divDetail" class="toopTip" style="display:none;"></div>
    </body>
    </html>