为WordPress网站上的链接添加一个醒目的提示

wordpress 在Wordpres网站上，当鼠标移动到超链接，会浮现一个醒目的提醒，这是如何做的？ 可能你发现很多童鞋的博客的链接上会弹出一个半透明的醒目提示，这是通过Sweet Titles标题增强插件实现的. Sweet Titles 这个名字源自于一个改变 Title 提示效果的 js 插件 Sweet Ti…

在Wordpres网站上，当鼠标移动到超链接，会浮现一个醒目的提醒，这是如何做的？

可能你发现很多童鞋的博客的链接上会弹出一个半透明的醒目提示，这是通过Sweet Titles标题增强插件实现的.

Sweet Titles 这个名字源自于一个改变 Title 提示效果的 js 插件 Sweet Titles Finalized。此插件不但让你的 title 提示效果变得美观，而且可以显示出你将要点击的链接的 url，让用户知道自己将要去哪里，同时提升了用户感受度。另外，系统的 title 提示有时间延迟，利用 js 可以迅速的展示出来。

不过个人感觉这个特效有点鸡肋，反而会干扰视线，影响浏览者阅读。

插件加载的JS文件有点大5K多，而Leeiio童鞋提供的简化代码，只有不到2K，如果你喜欢这个效果那就加上吧（代码中符号冲突，被表情替代，但不会影响复制使用）：

var sweetTitles = {
x : 10, // @Number: x pixel value of current cursor position
y : 20, // @Number: y pixel value of current cursor position
tipElements : "a", // @Array: Allowable elements that can have the toolTip,split with ","
noTitle : true, //if this value is false,when the elements has no title,it will not be show
init : function() {
var noTitle = this.noTitle;
$(this.tipElements).each(function(){
$(this).mouseover(function(e){
if(noTitle){
isTitle = true;
}else{
isTitle = $.trim(this.title) != '';
}
if(isTitle){
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(){
if(this.myTitle != null){
this.title = this.myTitle;
$('#tooltip').remove();
}
}).mousemove(function(e){
$('#tooltip')
.css({
"top":(e.pageY+20)+"px",
"left":(e.pageX+10)+"px"
});
});
});
}
};
$(function(){
sweetTitles.init();
});

代码很简洁，前提是你的主题已加载了 jQuery 库。

有效果没有样式还不行，而要添加 css 样式才能让整个效果显得更加美妙。以下是 css样式供参考。

body div#tooltip { position:absolute;z-index:1000;max-width:220px;width:auto !important;width:220px;background:#000;text-align:left;padding:5px;min-height:1em;}
body div#tooltip p { margin:0;padding:0;color:#fff;font:12pxverdana,arial,sans-serif; }
body div#tooltip p em { display:block;margin-top:3px;color:#f60;font-style:normal;font-weight:bold; }