JQuery超链接鼠标提示效果

最新推荐文章于 2023-10-08 12:34:20 发布

又很可爱_521

最新推荐文章于 2023-10-08 12:34:20 发布

阅读量349

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/Guobeibei_123/article/details/80851562

JQuery 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了一种使用HTML和jQuery实现的鼠标悬停提示效果的方法。当鼠标悬停在超链接上时，会显示一个包含该链接标题的提示框；鼠标移出时，提示框消失。此效果适用于展示商品信息等场景。

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

超链接的形式，鼠标放在文字上会出现提示效果，鼠标移出，提示消失。

图片效果

HTML

<div class="scrollNews">
                    <ul>
                        <li><a href="#" class="tooltip" title="甜美宽松毛衣今秋一定红.">甜美宽松毛衣今秋一定红.</a></li>
                        <li><a href="#" class="tooltip" title="秋装百搭小马甲不到50元.">秋装百搭小马甲不到50元.</a></li>
                        <li><a href="#" class="tooltip" title="修身韩版小西装万人疯抢.">修身韩版小西装万人疯抢.</a></li>
                        <li><a href="#" class="tooltip" title="夏末雪纺店主含泪大甩卖.">夏末雪纺店主含泪大甩卖.</a></li>
                        <li><a href="#" class="tooltip" title="瑞丽都疯狂推荐的秋装.">瑞丽都疯狂推荐的秋装.</a></li>
                        <li><a href="#" class="tooltip" title="48元长款针织小开衫卖疯啦.">48元长款针织小开衫卖疯啦.</a></li>
                        <li><a href="#" class="tooltip" title="长袖雪纺衫单穿内搭都超美.">长袖雪纺衫单穿内搭都超美.</a></li>
                    </ul>
                </div>

JQuery/js部分

//超链接鼠标提示效果
            //设一个X的值
            var x = 10;
            //设一个Y的值
            var y = 20;
            //超链接的鼠标位于元素上时的样式
            $("a.tooltip").mouseover(function (e) {
                //鼠标移动到元素时显示title的值
                this.my_href = this.title;
                this.title = "";
                //创建div元素
                var tooltip = "<div id='tooltip'>" + this.my_href + "<\/div>";
                //把创建的div元素追加到body内
                $("body").append(tooltip);
                //div添加的css样式的X轴坐标与Y轴的坐标，显示隐藏的元素
                $("#tooltip").css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px" }).show("fast");
            }).mouseout(function () {
                this.title = this.my_href;
                //鼠标指针从元素中移出
                $("#tooltip").remove();
            });