CSS+JS实现超链接鼠标悬停提示

  这个不仅仅适合bo-blog,所有支持js的网站都能用。就是用CSS和js,不需要其他就可以实现非常漂亮的超链接鼠标悬停时弹出提示框,对于美化网站还是有些帮助的。

首先,在现有的css里面加入如下这段:(就是用来控制悬停提示样式及颜色的css代码,这里提供的是我博客用的颜色和样式。你可以通过修改下面的toolTip,及其P、EM、SPAN等几个参数来变换悬停提示的背景和文字颜色以符合你的网站色调。)
#wbc_online{margin-bottom:10px! important}
#wbc_online UL{clear:both;padding-right:0px;padding-left:0px;float:none;padding-bottom:0px;margin:2px 0px;width:100%;padding-top:0px;list-style-type:none}
#wbc_online UL LI{font-size:12px;float:left;margin:3px;width:20%}
BODY DIV#toolTip{padding-right:5px;padding-left:5px;min-height:1em;padding-bottom:5px;width:auto;padding-top:5px;position:absolute;text-align:left;-moz-border-radius:5px;background:#218BBC}
BODY DIV#toolTip P{padding-right:0px;padding-left:0px;padding-bottom:0px;margin:0px;font:11px verdana,arial,sans-serif;color:#fff;padding-top:0px;background:#218BBC}
BODY DIV#toolTip P EM{margin-top:3px;display:block;font-weight:bold;color:#fff;font-style:normal;background:#218BBC}
BODY DIV#toolTip P EM SPAN{font:9px verdana,arial,sans-serif;color:#fff;background:#218BBC}
注:-moz-border-radius:5px;一句是不符合W3C的CSS2.1标准的,如果介意的话可以删除这句,这句的作用就是让悬停提示部分变成圆角,值越大角越圆。

其次,将附件加压后得到的js文件放到网站跟下的images目录下。如果要放在其他目录,记得修改以下插入的代码中js文件的路径。

然后,在模板或者页面的源码(Bo-blog的模板文件是elements.php,就在你的模板目录里面。)之前插入以下代码js脚本。对于bo-blog来说,就是增加一个head模块。

  就是这么简单了,具体样式可以根据需要修改css代码部分,如果懂js的话,也可以一并根据需要修改。

  这个不是我原创的,网上搜集整理来的。感谢原作者!
nicetitle.zip




发表评论