在IE下,鼠标悬停只是几秒,解决内容过多时完整查看
例如
<div class='containt'>
<!-- 显示title begin-->
<span class='title_show' style='position: absolute;padding:10px; display:none;background:#edeef0; border: solid 1px #999999;border-radius:5px; z-index:9999'></span>
<!-- 显示title end-->
<div title='this is title' clss='mydiv'></div>
</div>
js事件
$(".mydiv").on("mouseover",this.proxy(this.title_show)).on("mouout",this.proxy(this.title_hide));
/**
* 鼠标悬停事件处理
*/
title_show:function(e){
e.preventDefault();
e.stopPropagation();
//获取当前的x坐标值
function pageX(elem){
return elem.offsetParent? (elem.offsetLeft+pageX(elem.offsetParent)):elem.offsetLeft;
};
//获取当前的Y坐标值
function pageY(elem){
return elem.offsetParent?(elem.offsetTop+pageY(elem.offsetParent)):elem.offsetTop;
};
function split_str(string,words_per_line) {
var output_string = string.substring(0,1); //取 出i=0时的字,避免for循环里换行时多次判断i是否为0
for(var i=1;i<string.length;i++) {
if(i%words_per_line == 0) {
output_string += "<br/>";
}
output_string += string.substring(i,i+1);
}
return output_string;
};
this.title_value = '';
var span=e.target;
var div=$(".title_show")[0];
this.title_value = span.title;
div.style.left = pageX(span)+50+'px';
div.style.top = pageY(span)-230+'px';
var words_per_line = 40; //每行字数
var title = split_str(span.title,words_per_line); //按每行25个字显示标题内容。
div.innerHTML = title;
div.style.display = '';
span.title = ''; //去掉原有title显示。
},
title_hide:function(e){
var span=e.target;
var div=$(".title_show")[0];
span.title = this.title_value;
div.style.display = "none";
}
this.proxy是this对象的转移