鼠标悬浮出现TIP的JS脚本与悬浮DIV出现冲突，急求解决办法！

我在页面用了一个热区域鼠标悬浮出现TIP提示框
只要触及TIP的事件后，鼠标在悬浮DIV的上面移动的话，DIV会闪烁，特别是在页面加一个背景的时候效果越发明显刷新页面后，如果不触及TIP事件，DIV是完全正常的。
请问该怎样修改JS代码使得悬浮的DIV不会受到影响？
（鼠标TIP有一个渐现的效果，可以完全去除只要鼠标放上热区出现提示框就行）以下是页面的html和引用的JS代码
<a class="link2" onclick="openreg();" 
onmouseover="mousetip.show('注册享受更多服务');" onmouseout="mousetip.hide();">注&nbsp;&nbsp;&nbsp;&nbsp;册</a><div style='position:absolute;width:200px;height:290px;z-index:1;left: 17px;top: 27px;background-color: #eff0f1;'>123456<br>123456<br></div>
var mousetip = new mousetip();
function mousetip(){
    var id = 'tt';
    var top = 0;
    var left = -10;
    var maxw = 500;
    var speed = 5;
    var timer = 20;
    var endalpha = 80;
    var alpha = 0;
    var tt,t,c,b,h;
    var ie = document.all ? true : false;
    this.x = false;
    var o = this;
    o.x_x = false;
    
    return{
        show:function(v,w){
            if(this.x){
                if(tt == null){
                    tt = document.createElement('div');
                    tt.setAttribute('id',id);
                    t = document.createElement('div');
                    t.setAttribute('id',id + 'top');
                    c = document.createElement('div');
                    c.setAttribute('id',id + 'cont');
                    b = document.createElement('div');
                    b.setAttribute('id',id + 'bot');
                    tt.appendChild(t);
                    tt.appendChild(c);
                    tt.appendChild(b);
                    document.body.appendChild(tt);
                    tt.style.opacity = 0;
                    tt.style.filter = 'alpha(opacity=0)';
                    
                    o.x_x = true;
                    
                    document.onmousemove = this.pos;
                }
                tt.style.display = 'block';
                c.innerHTML = v;
                tt.style.width = w ? w + 'px' : 'auto';
                if(!w && ie){
                    t.style.display = 'none';
                    b.style.display = 'none';
                    tt.style.width = tt.offsetWidth;
                    t.style.display = 'block';
                    b.style.display = 'block';
                }
                if(tt.offsetWidth > maxw){tt.style.width = maxw + 'px'}
                h = parseInt(tt.offsetHeight) + top;
                clearInterval(tt.timer);
                tt.timer = setInterval(function(){mousetip.fade(1)},timer);
            }
        },
        pos:function(e){
            if( o.x_x ){
                var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY;
                var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX;            
                tt.style.top = (u - h) + 'px';
                tt.style.left = (l + left) + 'px';
            }
        },
        fade:function(d){
            if( o.x_x ){
                var a = alpha;
                if((a != endalpha && d == 1) || (a != 0 && d == -1)){
                    var i = speed;
                    if(endalpha - a < speed && d == 1){
                        i = endalpha - a;
                    }else if(alpha < speed && d == -1){
                        i = a;
                    }
                    alpha = a + (i * d);
                    tt.style.opacity = alpha * 0.1;
                    tt.style.filter = 'alpha(opacity=' + alpha + ')';
                }else{
                    clearInterval(tt.timer);
                    if(d == -1){tt.style.display = 'none'
                }}
            }
        },
        hide:function(){
            if( o.x_x ){
                clearInterval(tt.timer);
                tt.timer = setInterval(function(){mousetip.fade(-1)},timer);
            }
        }
    };
}
 mousetip.x = true;

解决方案 »

  1.   

    var mousetip = new mousetip();
    function mousetip(){
        var id = 'tt';
        var top = 0;
        var left = -10;
        var maxw = 500;
        var speed = 100;
        var timer = 20;
        var endalpha = 80;
        var alpha = 0;
        var tt,t,c,b,h;
        var ie = document.all ? true : false;
        this.x = false;
        var o = this;
        o.x_x = false;
        
        return{
            show:function(v,w){
                if(this.x){
                    if(tt == null){
                        tt = document.createElement('div');
                        tt.setAttribute('id',id);
                        t = document.createElement('div');
                        t.setAttribute('id',id + 'top');
                        c = document.createElement('div');
                        c.setAttribute('id',id + 'cont');
                        b = document.createElement('div');
                        b.setAttribute('id',id + 'bot');
                        tt.appendChild(t);
                        tt.appendChild(c);
                        tt.appendChild(b);
                        document.body.appendChild(tt);
                        
                        o.x_x = true;
                        
                        document.onmousemove = this.pos;
                    }
                    tt.style.display = 'block';
                    c.innerHTML = v;
                    tt.style.width = w ? w + 'px' : 'auto';
                    if(!w && ie){
                        t.style.display = 'none';
                        b.style.display = 'none';
                        tt.style.width = tt.offsetWidth;
                        t.style.display = 'block';
                        b.style.display = 'block';
                    }
                    if(tt.offsetWidth > maxw){tt.style.width = maxw + 'px'}
                    h = parseInt(tt.offsetHeight) + top;
                    tt.style.display = ''
                }
            },
            pos:function(e){
                if( o.x_x ){
                    var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY;
                    var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX;            
                    tt.style.top = (u - h) + 'px';
                    tt.style.left = (l + left) + 'px';
                }
            },
            fade:function(d){
                if( o.x_x ){
                    var a = alpha;
                    if((a != endalpha && d == 1) || (a != 0 && d == -1)){
                        var i = speed;
                        if(endalpha - a < speed && d == 1){
                            i = endalpha - a;
                        }else if(alpha < speed && d == -1){
                            i = a;
                        }
                        alpha = a + (i * d);
                        tt.style.opacity = alpha * 0.1;
                        tt.style.filter = 'alpha(opacity=' + alpha + ')';
                    }else{
                        clearInterval(tt.timer);
                        if(d == -1){tt.style.display = 'none'
                    }}
                }
            },
            hide:function(){
                if( o.x_x ){
                    tt.style.display = 'none'
                }
            }
        };
    }
     mousetip.x = true;去掉渐变早上答你了...在上面... 
    DIV没看到闪烁的现在... 或者你把整个页面代码拉上来吧.回错帖了...
      

  2.   

    完整代码如下。
    当鼠标悬浮在“注册”上除非JS事件后，点击登陆弹出窗口，鼠标在上面移动就会闪动。但是不触发JS事件，登录窗口就是完全正常的。
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>123</title>
    <script type="text/javascript">
    var mousetip = new mousetip();
    function mousetip(){
        var id = 'tt';
        var top = 0;
        var left = -10;
        var maxw = 500;
        var speed = 100;
        var timer = 20;
        var endalpha = 80;
        var alpha = 0;
        var tt,t,c,b,h;
        var ie = document.all ? true : false;
        this.x = false;
        var o = this;
        o.x_x = false;
        
        return{
            show:function(v,w){
                if(this.x){
                    if(tt == null){
                        tt = document.createElement('div');
                        tt.setAttribute('id',id);
                        t = document.createElement('div');
                        t.setAttribute('id',id + 'top');
                        c = document.createElement('div');
                        c.setAttribute('id',id + 'cont');
                        b = document.createElement('div');
                        b.setAttribute('id',id + 'bot');
                        tt.appendChild(t);
                        tt.appendChild(c);
                        tt.appendChild(b);
                        document.body.appendChild(tt);
                        tt.style.opacity = 0;
                        tt.style.filter = 'alpha(opacity=0)';
                        
                        o.x_x = true;
                        
                        document.onmousemove = this.pos;
                    }
                    tt.style.display = 'block';
                    c.innerHTML = v;
                    tt.style.width = w ? w + 'px' : 'auto';
                    if(!w && ie){
                        t.style.display = 'none';
                        b.style.display = 'none';
                        tt.style.width = tt.offsetWidth;
                        t.style.display = 'block';
                        b.style.display = 'block';
                    }
                    if(tt.offsetWidth > maxw){tt.style.width = maxw + 'px'}
                    h = parseInt(tt.offsetHeight) + top;
                    clearInterval(tt.timer);
                    tt.timer = setInterval(function(){mousetip.fade(1)},timer);
                }
            },
            pos:function(e){
                if( o.x_x ){
                    var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY;
                    var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX;            
                    tt.style.top = (u - h) + 'px';
                    tt.style.left = (l + left) + 'px';
                }
            },
            fade:function(d){
                if( o.x_x ){
                    var a = alpha;
                    if((a != endalpha && d == 1) || (a != 0 && d == -1)){
                        var i = speed;
                        if(endalpha - a < speed && d == 1){
                            i = endalpha - a;
                        }else if(alpha < speed && d == -1){
                            i = a;
                        }
                        alpha = a + (i * d);
                        tt.style.opacity = alpha * 0.1;
                        tt.style.filter = 'alpha(opacity=' + alpha + ')';
                    }else{
                        clearInterval(tt.timer);
                        if(d == -1){tt.style.display = 'none'
                    }}
                }
            },
            hide:function(){
                if( o.x_x ){
                    clearInterval(tt.timer);
                    tt.timer = setInterval(function(){mousetip.fade(-1)},timer);
                }
            }
        };
    }
     mousetip.x = true;</script><style type="text/css">
    <!--
    .loginarea {
    float: right;
    text-align: left;
    padding-right: 100px;
    padding-top: 100px;
    }
    .loginlink {
    font-size: 12px;
    margin-top: 33px;
    position: relative;
    }
    .loginall {
    width:290px;
    height:273px;
    }
    .logintip {
    width:287px;
    height:270px;
    }
    .logintop {
    width:287px;
    height:28px;
    }
    .logintopright {
    float: right;
    height: 22px;
    width: 60px;
    border: solid 1px #808385;
    padding-top: 5px;
    padding-left: 15px;
    background-color: #FFF;
    }
    .loginopenarea {
    width:285px;
    height:150px;
    border: solid 1px #808385;
    background-color:#FFF;
    }
    .loginareaname {
    margin-top:18px;
    margin-left:22px;
    }
    .loginformarea {
    height: 123px;
    width: 245px;
    margin-left: 20px;
    margin-top: 10px;
    }
    .username {
    height: 25px;
    width: 220px;
    background-color: #FFF;
    }
    .userpassword {
    height: 25px;
    width: 220px;
    background-color: #FFF;
    }
    .remenber {
    width: 100px;
    float: left;
    }
    .forget {
    width: 60px;
    float: right;
    margin-top: 5px;
    }
    .loginall #textfield {
    width: 210px;
    margin-left: 5px;
    padding-top: 4px;
    }
    .loginall #textfield2 {
    width: 210px;
    margin-left: 5px;
    padding-top: 4px;
    }
    #apDiv1 {
    position:absolute;
    width:200px;
    height:290px;
    z-index:1;
    left: -164px;
    top: -6px;
    }
    #tt {
    DISPLAY: block; POSITION: absolute
    }
    #tttop {
    BORDER-TOP: #dcdcdc 1px solid; DISPLAY: block; MARGIN-LEFT: 5px; OVERFLOW: hidden; HEIGHT: 0px
    }
    #ttcont {
    BORDER-RIGHT: #dcdcdc 1px solid; PADDING-RIGHT: 7px; DISPLAY: block; PADDING-LEFT: 7px; BACKGROUND: #fff; PADDING-BOTTOM: 3px; MARGIN-LEFT: 5px; BORDER-LEFT: #dcdcdc 1px solid; COLOR: #000; PADDING-TOP: 3px
    }
    #ttbot {
    DISPLAY: block; BACKGROUND: url(images/tt_bottom.gif) no-repeat left top; MARGIN-LEFT: 5px; OVERFLOW: hidden; HEIGHT: 13px
    }
    -->
    </style>
    </head>
    <body>
    <center>
      <div class="loginarea">
        <div class="loginlink"><a 
    onmouseover="mousetip.show('注册享受更多服务');" onmouseout="mousetip.hide();">注&nbsp;&nbsp;&nbsp;&nbsp;册</a>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;<a style="cursor:pointer; color:#4a4d51;" onclick="apDiv1.style.display ='block'">登&nbsp;&nbsp;&nbsp;&nbsp;录&nbsp;&nbsp;<img src="images/loginpoint.gif" width="9" height="7" border="0" /></a>
          <div id="apDiv1" style="display:;" onmouseover="apDiv1.style.display ='block'"  onmouseout="apDiv1.style.display ='none'">
            <div class="loginall">
              <div class="logintip">
                <div class="logintop">
                  <div class="logintopright"><a onclick="apDiv1.style.display ='none'" style="cursor:pointer; color:#1188c1;">登&nbsp;&nbsp;&nbsp;&nbsp;录&nbsp;&nbsp;<img src="images/loginpoint.gif" width="9" height="7" border="0" /></a></div>
                </div>
                <div class="loginopenarea">
                  <div class="loginareaname"><strong>会员登录</strong></div>
                  <div class="loginformarea">
                    <div class="username" id="username">
                      <label>
                        <input name="textfield" type="text" id="textfield" />
                      </label>
                    </div>
                    <div class="userpassword" id="userpassword">
                      <label>
                        <input name="textfield2" type="password" id="textfield2" />
                      </label>
                    </div>
                
                      <div class="remenber">
                        <input name="checkbox" type="checkbox" id="checkbox" />
                        下次自动登录 </div>
                      <div class="forget"><a href="#" class="link2">忘记密码？</a></div>
                   
                  </div>
                 
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </center>
    </body>
    </html>
      

  3.   

    把第44行代码注释了
      //document.onmousemove = this.pos;
      

  4.   

    document.onmousemove = this.pos;
    应该是由于你触发了这个事件导致的
    因为你的pos这个里面有一个根据鼠标改变位置的
      

  5.   

    你在div上也加一个onmouseover事件里面把
    这个div显示出来就可以解决