显示图片

最新推荐文章于 2023-12-19 20:30:08 发布

一只极度渴望成长的Giser

最新推荐文章于 2023-12-19 20:30:08 发布

阅读量97

点赞数

分类专栏： Javascript、JQuery练习文章标签：显示图片

本文链接：https://blog.csdn.net/qq_32077521/article/details/98308383

版权

Javascript、JQuery练习专栏收录该内容

69 篇文章 1 订阅

订阅专栏

<!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>