HTML与JavaScript交互实例-优快云博客

本文通过一个具体的HTML页面示例，展示了如何使用JavaScript实现元素的动态显示与隐藏，以及鼠标悬停事件触发的div弹出效果。代码中详细介绍了如何获取DOM元素，设置样式，并利用事件监听器响应用户操作。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
</head>
<body>
    <style type="text/css">
        #div1 {
            width: 100px;
            height: 250px;
            background-color: aqua;
            display: none;
        }
    </style>
    <p>新闻新闻</p><p>新闻新闻</p><p>新闻新闻</p><p>新闻新闻</p><p>新闻新闻</p><p>新闻新闻</p>
    中国企业家，出生于浙江杭州，毕业于杭州师范大学，阿里巴巴主要创始人<a id="a1" href="#">马云</a>
    <div id="div1">
        <p>姓名：马云</p>
        <p>性别：男</p>
        <p>住址：浙江</p>
        <p><img src="images/1.jpg" style="width:100px;height:100px;" /></p>
    </div>
    <script type="text/javascript">
        window.onload = function () {
            var divObj = document.getElementById('div1');
            var aObj = document.getElementById('a1');
            document.getElementById('a1').onmouseover = function () {
                divObj.style.position = 'absolute';//首先让div脱离文档流
                divObj.style.display = 'block';
                //left只要在设置 过定位位置position的情况下（position: relative;或者position:     //absolute）生效，即需要元素脱离文档流后才生效。
//margin-left是元素的左外边距，任何情况下都生效。
                divObj.style.left = aObj.offsetLeft + 'px';//超链接标签的左边距就是div的左边距
                divObj.style.top = aObj.offsetTop + aObj.offsetHeight + 'px';//超链接标签的上边距+超链接标签的自身高度=div的上边距
            };
            document.getElementById('a1').onmouseleave = function () {
                divObj.style.display = 'none';
            };
        };
    </script>
</body>
</html>