jQuery实现的超链接提示效果示例【附demo源码下载】

2019-11-20 09:02:04

字体：大中小

来源：转载

供稿：网友

本文实例讲述了jQuery实现的超链接提示效果。分享给大家供大家参考，具体如下：

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title></head><body><style type="text/css">*{margin:0;padding:0;}ul li{ list-style:none;}img {border:0 none;}body {padding:100px;}.tooltip{position:absolute;display:none;border:1px solid #333; border-radius:8px; box-shadow:0 0 3px rgba(000,000,000,0.8);background:rgba(247,245,209,0.5);padding:3px;color:#333;display:none;}/* border-radius，box-shadow ie9以下都不兼容 */</style><div class="test">  <a href="#" class="link" title="这是我的超链接提这是我的超<br>  <strong>链接</strong>提这是我的超链接提这是<img src='jb51.gif'>我的超<br>  链接提这是我的超链接提这是我的超链接提示1.">自定义链接提示</a>  <a href="#" class="link">默认title提示</a>  <a href="#" class="link" title="自定义TITLE提示2222！！！！">自定义链接提示</a>  <a href="#" title="原始链接TITLE提示！">原始链接title提示</a> </div></body><script src="jquery-1.7.2.min.js" type="text/javascript"></script><script type="text/javascript">$(document).ready(function() {  var x=10;  var y=20;  $(".link").mouseover(function(e){    //alert(e.pageX);    if(typeof($(this).attr('title'))!='undefined'){ // 判断标签中是否有定义title属性      this.my_tit=this.title;      this.title='';      var tooltip="<div class='tooltip'>"+this.my_tit+"</div>";      $("body").append(tooltip);      $(".tooltip").css({        display:'block',        left: e.pageX+x,        top: e.pageY+y        })      };    }).mouseout(function(){      if(typeof($(this).attr('title'))!='undefined'){        this.title=this.my_tit;        $(".tooltip").remove();      };    }).mousemove(function(e){// 鼠标移动时跟随      $(".tooltip").css({      left: e.pageX+x,      top: e.pageY+y    })  })});</script></html>

运行效果截图如下：