JQuery 学习笔记之：美妙的标题提示弹出层-CFANZ编程社区

JQuery 学习笔记之：美妙的标题提示弹出层

该特效“不但可以让你的 title 提示效果变得美观，而且可以显示出你将要点击的链接的 url，让用户知道自己将要去哪里”，能不能明显提升了用户感受得用户说了算，但我可以肯定的是这绝对能吸引用户的眼球！

jQuery代码，另存为JS或者整合：

123456789101112131415	jQuery(document).ready(function($){ $("a").mouseover(function(e){ this.myTitle = this.title; this.myHref = this.href; this.myHref = (this.myHref.length > 30 ? this.myHref.toString().substring(0,30)+"..." : this.myHref); this.title = ""; var tooltip = "<div id='tooltip'><p>"+this.myTitle+"<em>"+this.myHref+"</em>"+"</p></div>"; $('body').append(tooltip); $('#tooltip').css({"opacity":"0.8","top":(e.pageY+20)+"px","left":(e.pageX+10)+"px"}).show('fast'); }).mouseout(function(){this.title = this.myTitle;$('#tooltip').remove(); }).mousemove(function(e){$('#tooltip').css({"top":(e.pageY+20)+"px","left":(e.pageX+10)+"px"}); }); });

123456789101112131415

jQuery(document).ready(function($){
 
$("a").mouseover(function(e){
  this.myTitle = this.title;
  this.myHref = this.href;
  this.myHref = (this.myHref.length > 30 ? this.myHref.toString().substring(0,30)+"..." : this.myHref);
  this.title = "";
  var tooltip = "<div id='tooltip'><p>"+this.myTitle+"<em>"+this.myHref+"</em>"+"</p></div>";
  $('body').append(tooltip);
  $('#tooltip').css({"opacity":"0.8","top":(e.pageY+20)+"px","left":(e.pageX+10)+"px"}).show('fast');
}).mouseout(function(){this.title = this.myTitle;$('#tooltip').remove();
}).mousemove(function(e){$('#tooltip').css({"top":(e.pageY+20)+"px","left":(e.pageX+10)+"px"});
});
 
});

CSS美化代码：

#tooltip {position:absolute;z-index:1000;max-width:250px;word-wrap:break-word;background:#000;text-align:left;padding:5px;min-height:1em;-moz-border-radius:5px;-khtml-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
#tooltip p {color:#fff;font:12px 'Microsoft YaHei',Arial,宋体,Tahoma,Sans-Serif;}
#tooltip p em {display:block;margin-top:3px;color:#f60;font-style:normal;}