如何实现ibm中国网站上的这个效果

Question

就是鼠标移动到 "让我们共同实现智慧的地球" 上的时候出现 一个div层。谢谢！1:鼠标没移上去2:鼠标移上去3:鼠标移移开

Answer 1

1.div提前就弄好 但是是隐藏的
onmouseover时显示 onmouseout隐藏
2.onmouseover时判断这个悬浮div存在不存在 如果存在 直接显示 如果没有create一个div 控制位置 z-index和div里内容 append进页面 onmouseout时移除或隐藏

Answer 2

..........我试了一下,事先放个div会影响现有页面布局效果的。
不知道 楼上的大哥怎么处理的，能给代码吗？谢谢

Answer 3

他加了 css "position:absolute"不会影响布局，另外他加了js代码 控制显示的位置。其他的楼上多说了，给你分享一下控制位置的代码var scontol = {
    getAbsoluteLeft: function (ob) {
        var mendingLeft = ob.offsetLeft;
        while (ob != null && ob.offsetParent != null && ob.offsetParent.tagName != "BODY") {
            mendingLeft += ob.offsetParent.offsetLeft;
            ob = ob.offsetParent;
        }
        return mendingLeft;
    },
    getAbsoluteTop: function (ob) {
        var mendingTop = ob.offsetTop;
        while (ob != null && ob.offsetParent != null && ob.offsetParent.tagName != "BODY") {
            mendingTop += ob.offsetParent.offsetTop;
            ob = ob.offsetParent;
        }
        return mendingTop;
    },
    getAbsoluteHeight: function (ob) {
        return ob.offsetHeight
    },
    getAbsoluteWidth: function (ob) {
        return ob.offsetWidth
    }
}

Answer 4

谢谢楼上的：
我做出来了 ，但是有个问题 就是在这个出现的div里如果有<a herf 这样的链接的话，鼠标移上去，div会消失。不知道怎么解决这个问题？
<div onmouseout="discontrol('ondiv1')" id="ondiv1" style=" display:none; position:absolute; background-color:#fff; border:4px solid #cccccc;width:235px;color:#000;height:191px;margin-top:800px;z-index:999;margin-left:15px;">介绍信息.....<a href="showProducts.aspx?articleid=271">点击了解更多...</a>
<div onmouseover="discontrol('ondiv1')"  class="index_1product">
<script type="text/javascript">
       function discontrol(itemid) {
           if (document.getElementById(itemid).style.display == 'none') {
               document.getElementById(itemid).style.display = "";
           }
           else {
               document.getElementById(itemid).style.display = "none";
           }
       }
</script>

Answer 5

因为div位置没放对 你移动鼠标时又触发onmouseout 让div隐藏掉了

Answer 6

那要怎么放啊？是z-index没设对么？