zblog php 标题优化,给ZblogPhp添加个性化title样式

鼠标如果停留在有title属性的链接上，会有个提示框出来，但默认的那个不太好看，可以进一步去美化。本文就是讲述如何通过js美化这个title提示框。

这功能比较常见，而且觉得比较好看，样子是这样的：

原本本站是用上这功能了的，但是，在pjax下会有问题：例如你有一篇很长很长的文章，在手机下阅读，拖动到最下面，然后点击一个带有title属性的链接，这功能正常显示出来，但是在跳转的页面后，这个title提示框还是存在的！！想了一下没什么好办法，就先把这功能去掉，顺便写篇文章记录一下，说不定以后要用到呢？

不多说，开始步骤吧：

1、检查你网站有没有引入jquery，要1.7版本以上的，如果没有，请全局引入(如果你程序是ZblogPhp，那跳过这一步，系统自带有jquery，不需要另外引入，其他程序看情况。)：新浪CDN提速，也可以下载到本地再引入：

2、添加下面JS代码到你网站上，注意，这段代码必须要在上面的jquery后面加载。

function hooktooltip() {

$('*').each(function(i){if(this.title){var aTitle=this.title;$(this).mouseover(function(e){this.title='';$('body').append('

'+aTitle+'

')

;$('#tooltip').css({left: (e.pageX+30)+'px',top:(e.pageY+5)+'px',opacity:"0.8"

}).show(250)

}).mousemove(function(e) {

$('#tooltip').css({left: (e.pageX+30)+'px',top:(e.pageY+5)+'px'

})}).mouseout(function() {

this.title=aTitle;$('#tooltip').remove()

}).mousemove(function(e) {

$('#tooltip').css({left: (e.pageX+30)+'px',top:(e.pageY+5)+'px'

})})}});}

hooktooltip();

3、添加下面CSS代码到你主题CSS文件中：#tooltip {

background:#000000;

color:#FFFFFF;

text-align:center;

margin-right:10px;

position:absolute;

z-index:9999;

display:none;

box-shadow:0 0 5px #000000;

border:1px dashed #FFFFFF;

padding:3px 8px;

font-size:12px;

}

至此，个性化title属性提示框已经做好了，刷新一下看效果吧。CSS样式可以随便调成你喜欢的样子。

×

选择打赏方式：

微信 QQ钱包 支付宝

打赏

打赏

打赏

多少都是心意，谢谢大家！！！

×

选择分享方式：

微信扫一扫，分享朋友圈

Or

手机扫一扫，精彩随身带