给wordpress添加title属性的鼠标气泡悬浮窗
作者：matrix 被围观: 21,653 次 发布时间：2013-09-26 分类：Wordpress 兼容并蓄 | 14 条评论 »
这是一个创建于 3262 天前的主题，其中的信息可能已经有所发展或是发生改变。
鼠标停留在有title属性上的时候或有提示，但是默认的样式中有觉得不可观的地方。利用js即可实现修改。
NGRO的效果演示：
css代码：
代码语言：javascript复制#pre_a{background:#000;color:#FFF;text-align:center;margin-top:30px;margin-left:-100px;position:absolute;z-index:9999;display:none;box-shadow:0 0 5px #333;border:1px dashed #FFF;padding:3px 8px;font-size:12px;border-radius:6px;width:200px;word-wrap:break-word} 说明：气泡的样式是pre_a的ID。代码来自：奶酪博客
使用步骤：
1.主题header.php中加载js文件jquery.titleQIPAO.js（一定要确保是在JQ库的后面加载）
若你的主题已经加载了JQ库请选择下载一。下载一里面的代码很精简，建议使用。
若没有加载JQ库请选择下载二。下载二里面是把JQ1.4.2和此功能的代码打包了，现在JQ库都更新到1.10.2版本了，不建议选择下载二。
下载一、jquery.titleQIPAO.js（精简实用版本）：http://pan.baidu.com/s/1gdHHGcF
下载二、jquery.titleQIPAO.js（已经包含JQ库1.4.2版）：http://www.400gb.com/file/28916470
jquery.titleQIPAO.js（已经包含JQ库1.4.2版）：http://pan.baidu.com/share/link?shareid=3388345783&uk=3238236832
2.在WordPress主题的style.css中添加上面的那段css代码。
3.成功。
另效果一：
代码：
代码语言：javascript复制#pre_a{
position:absolute;
z-index:1000;
width:255px;
background:#fff;
padding:10px;
border:1px solid #ccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow:0px 0px 3px #333;
-moz-box-shadow:0px 0px 3px #333;
box-shadow:0px 0px 3px #333;
text-align:center;
} 浅蓝色，效果二：
代码：
代码语言：javascript复制#pre_a{
position: absolute;
color: #fff;
padding: 5px;
background: #8EC1DA;
-moz-box-shadow: 0px 0px 5px #8EC1DA;
-webkit-box-shadow: 0px 0px 5px #8EC1DA;
box-shadow: 0px 0px 5px #8EC1DA;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 5px;
text-align: center;
text-shadow: 1px 1px 1px #888888;
z-index:1000
} 更多参考：
使用jQuery UI修饰title属性的气泡悬浮框
