• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏幻天博客吧
  • 欢迎来到铃音的私人博客! QQ群

[教程]wordpress添加title属性的鼠标气泡悬浮窗

兴趣 天空の铃音 6年前 (2014-04-05) 1225次浏览 已收录 1个评论 扫描二维码
文章目录[隐藏]

鼠标停留在有 title 属性上的时候或有提示,但是默认的样式中有觉得不可观的地方。利用 js 即可实现修改。

NGRO 的效果演示

rpgsky.net_2014-04-05_11-23-13

css 代码

#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 版本了,不建议选择下载二。

2.在 WordPress 主题的 style.css 中添加上面的那段 css 代码。

3.成功。

另效果一

rpgsky.net_2014-04-05_11-23-14

代码

#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;  
    }

浅蓝色,效果二

rpgsky.net_2014-04-05_11-23-141

代码

#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.titleQIPAO.js  文件大小:未知
  下载声明:本站作品均有会员提供,如有侵犯您的版权请联系我们及时处理!
  下载地址:精简实用版本 已经包含 JQ 库 1.4.2 版

转载请注明 - [教程]wordpress 添加 title 属性的鼠标气泡悬浮窗 - 幻想天空 - 魔王殿 - 铃音の小屋
喜欢 (0)
[不公开]
分享 (0)
关于作者:
美国服务器正在努力恢复中!目前系统升级完善,功能可以使用!现在来申请免费空间无需填表哟!
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(1)个小伙伴在吐槽
  1. 代码的世界~啥时候能·教教我咧~
    cs1278510432014-04-05 22:39 回复 Windows 7 | Chrome 30.0.1599.101