JS通过超链接控制层标签显示与隐藏（含延时效果）

最新推荐文章于 2025-07-05 08:15:00 发布

原创最新推荐文章于 2025-07-05 08:15:00 发布 · 645 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

javascript

本文介绍如何使用JavaScript配合超链接控制HTML页面中的层叠样式表（CSS）标签进行显示和隐藏操作，同时实现平滑的延时效果。通过此技术，可以实现动态交互界面，提升用户体验。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #divReBa{
            width:400px;
            height:auto;
            background-color:aliceblue;
            position:absolute;
            display:none;
            
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            //获取div
            var div1 = document.getElementById('divReBa');
            this.document.getElementById('reba').onmouseover = function () {
                //1.获取a标签位置
                var x = this.offsetLeft;
                var y = Number( this.offsetTop) + 20;
                //2.给div标签定位
                
                div1.style.left = x+'px';
                div1.style.top =  y+'px';
                //3.显示div标签
                div1.style.display = 'block';
            };
            //flag 鼠标是否在div1上
            var mouseOnDiv1Flage = false;
            this.document.getElementById('reba').onmouseout = function () {
                //延迟消失
                window.setTimeout(function () {
                    if (!mouseOnDiv1Flage) {
                      div1.style.display = 'none';
                    }
                    else {
                         return false; 
                    }
                }, 30)               
            };
            div1.onmouseover = function () {
                mouseOnDiv1Flage = true;
                div1.style.display = 'block';
            };
            div1.onmouseout = function () {
                mouseOnDiv1Flage = false;
                div1.style.display = 'none';
            };
        };

    </script>
</head>
<body>
    2001年，9岁的<a href="#" id="reba">迪丽热巴</a>迪丽热巴被父亲带去一所艺术学院参加考试，当时她以为是上兴趣班，结果被录取后才发现是一个专业的舞蹈院校，而迪丽热巴也开始了为期六年的民族舞、芭蕾舞专业学习。2007年，从新疆艺术学院附属中等艺术学校以舞蹈表演专业毕业的迪丽热巴成为了新疆歌舞团的舞蹈演员 [9]  。2009年，迪丽热巴还在东北师范大学民族学院读了一年预科，在此期间她还参加了吉林省的首届少数民族新歌大赛，并最终获得了省级三等奖的成绩 [10]  。
    之后，迪丽热巴却慢慢发现这并不是自己想要的生活。于是决定继续求学，去看看外面的世界，因为有不错钢琴基础，所以本来想报考的是中央音乐学院，可报名时却看到了中戏和上戏在招生，便突然决定改学表演。而迪丽热巴会有这样的决定则是受到了她钢琴老师的指点
             <div id="divReBa">
                 <p>姓名：迪丽热巴</p>
                 <p>年龄：18岁</p>
                 <p><img src="img/1123.jpg" alt="迪丽热巴小时候" /></p>
                 <p>人物介绍超链接+控制隐藏层+延时隐藏（出现在超链接下面，offsetLeft,offsetTop）</p>
             </div>

</body>
</html>