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

女爷i 2023-08-17 17:20 171阅读 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 条评论，171人围观）

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

相关阅读

相关超链接

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

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

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

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

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

相关超链接

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

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

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

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

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

相关 php微擎循环输出链接,自定义链接循环

一、语法 \{list action=navigator type=类别id....\}\{/list\} 简写(3.2.19以上版本支持)：\{navigator typ

素颜马尾好姑娘i/ 2023年01月16日 03:23/ 0 赞/ 191 阅读

相关 web超链接

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

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

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

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

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

相关 HTML——超链接

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

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

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

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

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

相关 POSCMS 后台自定义链接友情链接增加搜索功能

后台友情太多.管理是个问题.所以增加搜索功能.可以快速定位并删除一,修改/diy/dayrui/controllers/admin/Navigator.php

今天药忘吃喽~/ 2021年09月26日 10:14/ 0 赞/ 478 阅读