实现鼠标提示框

最新推荐文章于 2024-10-16 11:03:04 发布

捞比丶

最新推荐文章于 2024-10-16 11:03:04 发布

阅读量273

点赞数

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/qq_41915936/article/details/107204010

版权

JavaScript 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了如何实现鼠标悬停时显示提示框的功能，详细描述了实现这一效果的具体步骤和方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现鼠标提示框

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
        <title>Document</title>
        <style>
            a{display: block; font-size: 40px; margin: 100px; width: 130px}
			#msg{width: 600px; height: 150px; background-color: gray; color: white; display: none; position: absolute;}
        </style>
        <script>
            /* 
                事件类型：
                    mouseover
                        让提示框显示
                    mouseout
                        让提示框隐藏
                    mousemove
                        让提示框跟随鼠标去移动
                      

                   
                    clientX  clientY  原点位置：可视窗口的左上角为原点
                    pageX    pageY    原点位置：整个页面的左上角(包含滚出去的滚动距离)
                    screenX  screenY  原点位置：电脑屏幕的左上角

                 
             */
             
             var arr = ["唐太宗李世民（598年1月28日－649年7月10日），陇西成纪（今甘肃省秦安县）人。唐朝第二位皇帝（626~649年在位），杰出的政治家、战略家、军事家、诗人，唐高祖李渊嫡次子，母为太穆皇后窦氏", "唐高宗李治（628年7月21日-683年12月27日） [1]  ，字为善，祖籍陇西成纪，唐朝第三位皇帝（649至683年在位），唐太宗李世民第九子，嫡三子，其母为文德顺圣皇后长孙氏，与唐太宗嫡长子太子李承乾、嫡次子魏王李泰为同母兄弟。", "武则天（624年－705年12月16日 [1]  ），自名武曌（zhào） [2-3]  ，并州文水（今山西文水）人。中国历史上唯一的正统女皇帝（690年－705年在位），也是即位年龄最大（67岁）、寿命最长的皇帝之一（82岁），与汉朝的吕后并称为“吕武”。", "唐玄宗李隆基（685年9月8日—762年5月3日），唐高宗李治与武则天之孙，唐睿宗李旦第三子，故又称李三郎，母窦德妃。 [1]  先天元年（712年）至天宝十五年（756年）在位，因安史之乱退位为太上皇，是唐朝在位最长的皇帝，亦是唐朝极盛时期的皇帝。"];
            //【注】arr数组中是按照a标签的下标去存储对应的描述信息的
            window.onload = function(){
                var aAs = document.getElementsByTagName("a");
                var oMsg = document.getElementById("msg");

                for(var i = 0; i < aAs.length; i++){
                    aAs[i].index = i;
                    aAs[i].onmouseover = function(){
                        oMsg.innerHTML = arr[this.index];
                        oMsg.style.display = 'block';
                    }

                    aAs[i].onmouseout = function(){
                        oMsg.style.display = 'none';
                    }

                    //添加鼠标移动事件
                    aAs[i].onmousemove = function(ev){
                        var e = ev || window.event;
                        oMsg.style.left = e.clientX + 5 + 'px';
                        oMsg.style.top = e.clientY + 5 + 'px';
                    }
                }
            }
        
        </script>
    </head>
    <body>
            <a href="#">唐太宗</a>
            <a href="#">唐高宗</a>
            <a href="#">武则天</a>
            <a href="#">唐玄宗</a>
            <div id = 'msg'></div>
    </body>
</html>