每日一则（5）：jquery模拟超链接提示功能。

最新推荐文章于 2019-12-30 16:23:14 发布

路家小白

最新推荐文章于 2019-12-30 16:23:14 发布

阅读量410

点赞数

分类专栏：每日一则

本文链接：https://blog.csdn.net/u011305328/article/details/53510128

版权

每日一则专栏收录该内容

2 篇文章 0 订阅

订阅专栏

我已经不想说明自己是有多傻，多傻，多傻。明明一个已经提示过的问题，自己又在哪里纠结了一个小时，原谅我最近愁思万千，已经昏了头。
其实就是一个很简单的小案例，

使用jquery库模拟超链接的提示的功能。

思路很简单：

    $(function () {
//        1.给a标签注册一个鼠标划过事件（当鼠标一经过的时候就显示提示div），
//        一个鼠标离开事件（离开以后就隐藏或则移出div），一个鼠标移动事件（当你的鼠标再超链接上移动的时候
//        ，提示内容也得跟着你的鼠标移动不是吗?要是不移动那岂不是太奇怪了， 你说类？）。

//        2.鼠标划过事件
//        2.1我们要先获取a标签
//        2.2给获取到的a标签注册mouseover事件
        $("a.tooltip").mouseover(function (e) {
//          2.3我们要动态的创建一个div，并把a标签的title属相添加到div上面去
            var tooltip="<div id='totp'>"+this.title+"</div>";
//          2.4把创建的div添加到body中（因为你动态添加的标签她只是存在于内存中，
//            你必须手动添加到dom树上，才能对他进行操作（你想怎么做就怎么做你懂的，呵呵，我又邪恶了。））
            $("body").append(tooltip);
//          2.5获取到该div对他进行样式设置，因为要跟随鼠标，
//            所以要设置div的位置（一定要记住，div必须定位才能给他设置top，left，否则不生效）
            $("#totp").css({
                "top": e.pageY  + "px",
                "left": e.pageX   + "px"}).show("fast");
        })
//           3.鼠标离开事件（因为jquery提供的链式机制，所以可以这样子继续注册）
                .mouseout(function () {
//                    3.1把我们创建的div移出
                    $("#totp").remove();
                })
//                4.鼠标移动事件
                .mousemove(function (e) {
                    $("#totp").css({
                        "top": e.pageY + "px",
                        "left": e.pageX   + "px"
                    })
                });

    });

是不是觉得这样子就完美了，就可以完成任务了？梦想是美好的，但是现实是骨敢的，这样子会出问题。

出现问题：

1.当你自己的div显示了以后，你一会人家a标签默认的提示就显示，我去，是不是很尴尬，所以我们的想办法去除。
2.因为div设置的距离就是鼠标的位置，由于鼠标焦点的变化引起鼠标离开事件，会导致你的鼠标不停的闪啊，闪啊，div一会出现一会消失（其实是因为，你给你的a标签设置移动上去的时候，显示div，离开a标签的时候，div不显示，如果把div的位置设置成鼠标的位置，那么当div出来后，鼠标其实就是点击的div，已经离开a标签，当离开a标签，div消失掉了，鼠标又点在a标签上了，div又出现了。如此反复就会出现div，鼠标闪啊，闪的效果，好吧是不是把你们说晕了，自己慢慢体会把。xixi。）

解决方案：

1.a标签显示提示信息是因为设置了title属性，所以我们在鼠标划过的事件上，把title属性置空就好。
2.我们不让div的位置就是鼠标的位置，我们可以往下，往右点，让鼠标点不到他。

完整代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src=jquery-1.12.2.min.js></script>
    <style>
     #totp{
         position: absolute;
         border: 1px solid #333;
         background: pink;

     }
    </style>
</head>
<body>
<p><a href="#" class="tooltip" title="这是我的提示a">这是我的提示a</a></p>
<p><a href="#" class="tooltip" title="这是我的提示b">这是我的提示b</a></p>
<p><a href="#" title="这是提示a">这是提示a</a></p>
<p><a href="#" title="这是提示b">这是提示a</a></p>
</body>
<script>
    $(function () {

        2.机智的设置个偏移的坐标值
        var x = 10;
        var y = 20;
        $("a.tooltip").mouseover(function (e) {
        1.我们把title值保存起来，然后再清空，因为我们鼠标离开的时候还要给人家送回去。
            this.mytitle=this.title;
            this.title="";
            var tooltip="<div id='totp'>"+this.mytitle+"</div>";
            $("body").append(tooltip);
            $("#totp").css({
                "top": (e.pageY + y) + "px",
                "left": (e.pageX  + x) + "px"}).show("fast");
        })
                .mouseout(function () {
                    this.title=this.mytitle;
                    $("#totp").remove();
                }).mousemove(function (e) {
                    $("#totp").css({
                        "top": (e.pageY + y) + "px",
                        "left": (e.pageX  + x) + "px"
                    })
                });

    });
</script>
</html>

其实这个功能很常见了，为何博主还要记录呢，我是想提醒自己犯下的愚昧的错误。可怜的博主的1个小时。

路家小白

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
每日一则（5）：jquery模拟超链接提示功能。

我已经不想说明自己是有多傻，多傻，多傻。明明一个已经提示过的问题，自己又在哪里纠结了一个小时，原谅我最近愁思万千，已经昏了头。其实就是一个很简单的小案例，使用jquery库模拟超链接的提示的功能。思路很简单： $(function () {// 1.给a标签注册一个鼠标划过事件（当鼠标一经过的时候就显示提示div），// 一个鼠标离开事件（离开以后就隐藏
复制链接

扫一扫