JQuery实现超链接鼠标提示效果的方法

最新推荐文章于 2019-09-20 22:28:00 发布

又很可爱_521

最新推荐文章于 2019-09-20 22:28:00 发布

阅读量440

点赞数

分类专栏： JQuery 文章标签：郭贝贝的博客编程 JQuery 实现超链接鼠标提示效果的方法

本文链接：https://blog.csdn.net/Guobeibei_123/article/details/80762764

版权

JQuery 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

实现超链接鼠标的提示效果

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        #href_one {
            position:absolute;
            border:1px solid black;
            background:aqua;
            padding:1px;
            color:black;
            display:none;
        }
        a {
            text-decoration:none;/*超链接去掉下划线*/
        }
    </style>    <script src="Scripts/jquery-1.11.3.js"></script>
    <script type="text/javascript">
        $(function () {
            //定义X轴的坐标
            var x = 10;
            //定义Y轴的坐标
            var y = 20;
            //超链接的点击事件，鼠标指针位于元素上方时
            $("a.href_one").mouseover(function (e) {//mouseover:当鼠标指针位于元素上方时，会发生 mouseover 事件。
                //鼠标覆盖时显示title
                this.my_href = this.title;
                this.title = "";
                //创建div元素
                var href_one = "<div id='href_one'>" + this.my_href + "<\/div>";
                //把创建好的div元素追加到文档中
                $("body").append(href_one);
                //追加样式
                $("#href_one").css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px" }).show("fast");
                //mouseout:当鼠标指针从元素上移开时，发生 mouseout 事件。
              }).mouseout(function () {
                //鼠标移开时不显示title
                this.title = this.my_href;
                $("#href_one").remove();
                  //mousemove:当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件。其X/Y代表鼠标的坐标
              }).mousemove(function (e) {
                //鼠标移动时，title跟随鼠标移动
                $("#href_one").css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px" });
            });
        });
    </script>
</head>
<body>
    <p><a href="#" title="这是一个超链接1" class="href_one">我是超链接1</a></p>
    <p><a href="#" title="这是一个超链接2" class="href_one">我是超链接2</a></p>
</body>
</html>

又很可爱_521

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery实现超链接鼠标提示效果的方法

实现超链接鼠标的提示效果&lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt;
复制链接

扫一扫

专栏目录