案例：跟随鼠标移动提示框

最新推荐文章于 2023-03-22 18:12:54 发布

东方求败、

最新推荐文章于 2023-03-22 18:12:54 发布

阅读量300

点赞数 1

分类专栏： javascript复习之路 # javascript基础文章标签： html5 javascript html

本文链接：https://blog.csdn.net/wang_swa99er/article/details/120157802

版权

javascript复习之路同时被 2 个专栏收录

87 篇文章 1 订阅

订阅专栏

javascript基础

77 篇文章 1 订阅

订阅专栏

案例：跟随鼠标移动提示框

直接上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script></script>
    <style>
        a{display: blcok;font-size: 40px;margin: 100px;width: 130px;}
        #msg{width: 600px;height: 150px;background-color: gray;color: white;display: none;position: absolute;}
    </style>
    <script>
        var arr = ["aa","bb","cc","dd"];
        window.onload = function(){
            var oAs = document.getElementsByTagName("a");
            var oMsg = document.getElementById("msg");

            for(let i = 0;i<oAs.length;i++)
            {
                //oAs[i].index = i;
                oAs[i].onmouseover = function(){
                    oMsg.innerHTML = arr[i];
                    oMsg.style.display = 'block';
                }
                oAs[i].onmouseout = function(){
                    oMsg.style.display = 'none';
                }

                // 让提示框总是悬停在鼠标的右下角
                oAs[i].onmousemove = function(ev){
                    var e = ev || window.event;
                    
                    oMsg.style.left = e.clientX + 10 +'px';
                    oMsg.style.top = e.clientY + 10 + 'px';
                }
            }
     
        }
    </script>    
</head>
<body>
    <a href="#">AA</a>
    <a href="#">BB</a>
    <a href="#">CC</a>
    <a href="#">DD</a>
    <div id = "msg"></div>
</body>
</html>

实现效果：
跟随鼠标移动提示框
相关知识：
事件类型的种类
 鼠标事件对象的属性

东方求败、

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
案例：跟随鼠标移动提示框

案例：跟随鼠标移动提示框直接上代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script></s
复制链接

扫一扫