重写鼠标悬停事件(针对IE)

在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对象的转移

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值