自定义超链接文字提示效果

女爷i 2023-08-17 17:20 61阅读 0赞

自定义超链接文字提示和自带的超链接提示相比具有响应时间更快，更加美观的优点~

1 /* 超链接文字提示 */
     2 $(function(){
     3     var x = 10;  
     4     var y = 20;
     5     $("a.tooltip").mouseover(function(e){
     6            this.myTitle = this.title;
     7         this.title = "";    
     8         var tooltip = "<div id='tooltip'>"+ this.myTitle +"</div>"; //创建 div 元素
     9         $("body").append(tooltip);    //把它追加到文档中
    10         $("#tooltip")
    11             .css({
    12                 "top": (e.pageY+y) + "px",
    13                 "left": (e.pageX+x)  + "px"
    14             }).show("fast");      //设置x坐标和y坐标，并且显示
    15     }).mouseout(function(){        
    16         this.title = this.myTitle;
    17         $("#tooltip").remove();   //移除 
    18     }).mousemove(function(e){
    19         $("#tooltip")
    20             .css({
    21                 "top": (e.pageY+y) + "px",
    22                 "left": (e.pageX+x)  + "px"
    23             });
    24     });
    25 })

转载于:https://www.cnblogs.com/s-z-y/p/4461272.html

发表评论取消回复

表情：

评论列表（有 0 条评论，61人围观）

还没有评论，来说两句吧...

相关阅读

相关超链接

基础知识定义：超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，可以点击这些内容来跳转到新的页面或者当前页面中的某个部分。语法： `<a href

怼烎@/ 2023年10月18日 21:04/ 0 赞/ 71 阅读

相关自定义超链接文字提示效果

自定义超链接文字提示和自带的超链接提示相比具有响应时间更快，更加美观的优点~ 1 / 超链接文字提示 / 2 $(function(){ 3

女爷i/ 2023年08月17日 17:20/ 0 赞/ 62 阅读

相关超链接

1、图片链接和文字连接 <!DOCTYPE html> <html> <head> <meta charse

小鱼儿/ 2023年08月17日 16:10/ 0 赞/ 137 阅读

相关 jQuery笔记：网站的超链接和图片的提示效果

文章目录超链接提示效果版本1 版本2 版本3（最终版本）图片提示效果超链接提示效果在现代浏览器中，超

痛定思痛。/ 2023年06月26日 05:41/ 0 赞/ 16 阅读

相关 web超链接

关于网页设计的超链接代码，如下：  <!doctype html> <html lang="en"

梦里梦外;/ 2022年12月11日 13:36/ 0 赞/ 249 阅读

相关 html超链接图片下加文字颜色,如何为文字、形状、图片添加超链接？如何为超链接设置颜色？...

你知道如何为PPT中的文字、形状、图片添加超链接吗？那么，你又知道如何设置超链接的颜色吗？接下来小编就来仔细的讲解一下吧~看图思路更清晰哦！如何为PPT中的文字、形状、图片

青旅半醒/ 2022年10月11日 03:50/ 0 赞/ 264 阅读

相关 HTML——超链接

一、What？——什么是超链接先说一下我个人目前对“超链接”的理解，就两字：跳转哈哈，我个人的理解好像解释的有点简单粗暴了，比原词还

青旅半醒/ 2022年06月11日 06:59/ 0 赞/ 351 阅读

相关 JQuery 学习笔记（一）超链接和图片提示效果

html 代码： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > < HTML > <

约定不等于承诺〃/ 2022年01月10日 01:11/ 0 赞/ 75 阅读

相关 GridView超链接

[GridView超链接][GridView] GridView中的超级链接，可以设置一个模版列，放入超级链接的控件，设置绑定参数即可。(自定义列) 数据绑定方式有两种

ゝ一纸荒年。/ 2021年12月17日 00:45/ 0 赞/ 381 阅读

相关 html 超链接

超链接(行内元素) <a>一定要写点击超链接名称,可以是文字或图片</a> 属性 href 写要跳转的网页资源路径

ゞ浴缸里的玫瑰/ 2021年07月24日 21:43/ 0 赞/ 602 阅读