【WEB】HTML标签自带属性title样式修改

背景

实现原理

通过动态创建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 = 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
		})
	}
})