细心的朋友一定会发现，近来你在浏览我的博客时，只要轻轻移动你的鼠标到超链接上，就会有一个半透明的提示框出现，显示这个超链接的说明文字，以及这个链接的详细地址。具体效果如下图所示：

有不少朋友发Email给我问我这个具体是如何实现的。OK，今天就简单的给大家介绍一下它的实现方法。

特效名称：超链接美化特效
实现方式：JavaScript+CSS
实现难度：简单
效果适用度：纯属娱乐

首先要说明的是，这个效果是利用JavaScript实现的，我个人认为过多地使用JS会严重影响博客的加载速度，因此能不使用尽量不要使用，非要使用的话能少则少！毕竟博客的内容才是最主要的，为了外表的美观而让读者因为访问的速度慢如蜗牛而烦不胜烦，那是得不偿失的事情！所以如果你的主机速度够快，那你大可以把这个效果添加上去玩玩，否则还是不加为妙！

一、添加JavaScript文件

1. 首先下载 addEvent.js 和 sweetTitles.js 这两个JS文件。
2. 将这两个文件上传到你的主题文件夹下js文件夹中（如果你的主题中没有js文件夹，你可以建立一个）
3. 在你的主题中的head.php文件在</head>之前添加如下代码：

   <!-- Sweet Titles Start -->
   <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/addEvent.js"></script>
   <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/sweetTitles.js"></script>
   <!-- Sweet Titles End -->

   ①你还可以将其添加到主题文件foot.php中的</body>之前，这样做的好处就是优先加载网页的主要内容，其次再加载这些JS文件，避免其拖慢网页加载速度！

   ②注意这两个JS文件的加载顺序不能改变！也就是说上面的两行代码不能互换位置！

二、添加CSS样式

功能添加完了，现在我们就要给它添加一个显示的样式，下面我给出一个范例的样式，当然你可以按照你的喜好给它制定个性化的样式。

打开主题文件中的 style.css 文件，在其最后添加如下代码即可：

body div#toolTip {
	position:absolute;
	z-index:1000;
	width:220px;
	background:#000;
	border:2px double #fff;
	text-align:left;
	padding:5px;
	min-height:1em;
	-moz-border-radius:5px;
}
body div#toolTip p {
	margin:0;
	padding:0;
	color:#fff;
	font:11px/12px verdana,arial,sans-serif;
}
body div#toolTip p em {
	display:block;
	margin-top:3px;
	color:#f60;
	font-style:normal;
	font-weight:bold;
}
body div#toolTip p em span {
	font-weight:bold;
	color:#fff;
}

OK！现在这个美化特效就全部完成了，刷新一下你的页面，你就可以看见效果啦！

声明：城市@后版权所有,未经授权请勿转载本博客日志到任何博客或论坛！

如果你喜欢我的文章，欢迎订阅。Google Reader | 鲜果 | 抓虾 | 九点 | QQ邮箱 | 有道 | 更多