背景
最近字体版权问题,公司的网站页面要统一换字体,Windows平台换成宋体(SimSun),Mac平台换成黑体(SimHei)。然后,偶然留意到title的默认提示框。title的样式是没法使用CSS进行设置的,所以使用了一种折中的方法,通过给document注册mouseover、mouseout、mousemove事件实现修改提示框。
实现原理
通过动态创建DIV,滞空HTML标签的title属性。
当触发mouserover事件时,创建DIV。当触发mousermove事件时,修改DIV的位置。当触发mouserover事件时,删除DIV。
代码
var oldTitle = null;$(document).bind('mouseover mouseout mousemove',function(event){var left = event.pageX , top = event.pageY;var ele = event.target;var title = ele.title;var type = event.originalEvent.type;if(type == 'mouseover'){oldTitle = title;ele.title = '';//if(title && title.length > 0){if(title != null){var showEle = $('<div></div>',{text:title,class:'showTitleBox'}).css({position:'absolute',top:top+10,left:left,border:'1px solid #CCC',borderRadius:'5px',background:"infobackground",fontFamily:'SimHei'})showEle.appendTo('body');}}else if(type == 'mouseout'){ele.title = oldTitle;$('.showTitleBox').remove();}else if(type == 'mousemove'){$('.showTitleBox').css({top:top+10,left:left})}})