【WEB】HTML标签⾃带属性title样式修改
背景
最近字体版权问题，公司的⽹站页⾯要统⼀换字体，Windows平台换成宋体（SimSun），Mac平台换成⿊体（SimHei）。然后，偶然留意到title的默认提⽰框。title的样式是没法使⽤CSS进⾏设置的，所以使⽤了⼀种折中的⽅法，通过给document注册mouseover、mouseout、mousemove事件实现修改提⽰框。
实现原理
通过动态创建DIV，滞空HTML标签的title属性。
1. 当触发mouserover事件时，创建DIV。
2. 当触发mousermove事件时，修改DIV的位置。
3. 当触发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 = pe;
if(type == 'mouseover'){
oldTitle = title;
position标签属性
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
})
}
})

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。