求高手js

<html>
<head>
<style>
html,body {
            overflow:hidden;
            margin:0px;
            width:100%;
            height:100%;
        }
        .virtual_body {
            width:100%;
            height:100%;
            overflow-y:scroll;
            overflow-x:auto;
        }
</style>
</head>
<body>
<div class="virtual_body">
<div>
<iframe id="frame1" src="http://www.baidu.com" width="100%"></iframe>
</div>
<div id='rightDiv' style="background:black;width:500px;  border:2px #FF0000 solid;position:absolute; z-index:10000; top:5px; right:0px; display:none;overflow-y:scroll; ">
</div>
</div>
</body>
</html>
想实现这样的一个功能：当移动到div所在的区域时这个div快就会显示，当离开div所在区域时div快就会隐藏，不论是否从iframe上移动div快都可以显示或隐藏，该怎样添加js代码呢，求高手解决？

解决方案 »

  1.   


    <html>
    <head>
    <style type="text/css">
    #div2{
    margin-top:50px;
    margin-left:250px;
    width:450px;
    height:300px;
    background:#FFFFFF;
    border:solid 1px #c3c3c3
    }
    #div1{
    display:none;
    margin-top:50px;
    margin-left:250px;
    width:200px;
    padding:40px;
    background:#FFFFFF;
    border:solid 1px #c3c3c3
    }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/JavaScript">
    $(function(){
    $("#div2").mouseout(function(){$("#div1").hide();}).mouseover(function(){$("#div1").show();});
    })
    </script>
    </head>
    <body>
    <div id="div2" class="b">
    把鼠标放在上面
    <div id="div1" class="a">
    区域DIV1中的内容
    </div>
    </div>
      

  2.   

    下面的可以，不过无法操作iframe的内容，用透明浮动层浮动在iframe上面就可以出发事件了一定要操作iframe那就没办法了，除非iframe是你自己的页面，没有跨域，自己参考这个修改js代码获取iframe中鼠标事件在父页的坐标位置
    <html>
    <head>
    <script>
        window.onload = function () {
            var divObj = document.getElementById("rightDiv");
            divObj.style.width = parseInt(document.body.offsetWidth) / 3;
            divObj.style.height = document.body.offsetHeight;
            var isOverDiv = false;
            document.body.onmousemove = function (e) {
                var e = e || window.event;
                if (parseInt(divObj.style.width) > parseInt(document.body.offsetWidth) - parseInt(e.clientX)) {
                    isOverDiv = true;
                    divObj.style.display = '';
                }
                if (parseInt(divObj.style.width) < parseInt(document.body.offsetWidth) - parseInt(e.clientX) && isOverDiv) {
                    divObj.style.display = 'none';
                }
            }    }
    </script>
    </head>
    <body>
    <div >
    <div id='rightDiv' style="background:black;  border:2px #FF0000 solid;position:absolute; z-index:10000; top:5px; right:0px; display:none; ">
    </div>
    <div style="width:100%;height:100%;position:relative">
    <div style="position:absolute;width:100%;height:100%;filter:alpha(opacity=0);opacity:0;background:#000"></div>
    <iframe src="http://www.baidu.com" width="100%" ></iframe>
    </div>
    </div>
    </body>
    </html>