浏览器自带的alt和title提示太丑了,所以我们需要美化一下,百度有许多,不过对我们这些小白来说很难。
首先复制下面代码到网站底部:
var sweetTitles = { x: 10, y: 20, tipElements: "a,span,img,div ", noTitle: false, init: function() { var b = this.noTitle; $(this.tipElements).each(function() { $(this).mouseover(function(e) { if (b) { isTitle = true } else { isTitle = $.trim(this.title) != '' } if (isTitle) { this.myTitle = this.title; this.title = ""; var a = "<div class='tooltip'><div class='tipsy-arrow tipsy-arrow-n'></div><div class='tipsy-inner'>" + this.myTitle + "</div></div>"; $('body').append(a); $('.tooltip').css({ "top": (e.pageY + 20) + "px", "left": (e.pageX - 20) + "px" }).show('fast') } }).mouseout(function() { if (this.myTitle != null) { this.title = this.myTitle; $('.tooltip').remove() } }).mousemove(function(e) { $('.tooltip').css({ "top": (e.pageY + 20) + "px", "left": (e.pageX - 20) + "px" }) }) }) } }; $(function() { sweetTitles.init() });然后添加网站css即可,样式自己修改即可,如下:
.tooltip{font-size:12px;position:absolute;padding:5px;z-index:100000;opacity:.8;font-family:Microsoft Yahei}.tipsy-arrow{position:absolute;width:0;height:0;line-height:0;border:6px dashed #000;top:0;left:20%;margin-left:-5px;border-bottom-style:solid;border-top:0;border-left-color:transparent;border-right-color:transparent}.tipsy-arrow-n{border-bottom-color:#6F8EC5}.tipsy-inner{background-color:#6F8EC5;color:#FFF;max-width:200px;padding:5px 8px 4px 8px;text-align:center;border-radius:3px}我这里用的蓝叶大佬的css,他的样式清新简洁。
这个功能需要引入jquery才能实现。
发表评论: