困扰我很久的一个问题是,当调用onmouseout的时候由于我需要隐藏的层上面还有好几个层,所以当鼠标在该层内划过子层的时候也会调用onmouseout,从而隐藏掉该层,但是我需要的效果是如csdn论坛上的用户头像上鼠标放上去就显示,移出该层的时候该层消失,还请大牛给解答下疑惑,以及实现方法!!感激不尽啊

解决方案 »

  1.   

    $("#id").onmouseout(function(){
       $("#id").hide();
    });
    你每个层得id不一样就可以了?这样就可以隐藏你想要隐藏的层了。其他的不会影响到。
      

  2.   

    解决HTML内部元素的Mouse事件干扰话说有一个DIV元素,其内部有一个IMG元素和SPAN元素,不用理会这两个内部元素怎么布局,这不是我要讨论的重点。为了实现一些特殊的效果,我需要利用TD的onmouseover和onmouseout事件,测试时就会发现如下的状况:当鼠标移入DIV内部时,onmouseover事件被触发;接着再鼠标移动到DIV内部的IMG或者SPAN元素之上,我们肯定不会认为这时鼠标已经移到了DIV的外边,但奇怪的是onmouseout事件触发了,而且紧接着onmouseover事件也马上被触发了。这可不是我想要的,那么怎么来“屏蔽”内部元素给外层元素带来的Javascript事件干扰呢?这里列举两种方法:一. setTimeout因为在鼠标移动到内部元素之上而触发了外层元素的onmouseout事件后,外层元素的onmouseover也会马上触发,所以我们只需要把外层元素的onmouseout事件需要执行的动作延迟很短的一段时间来运行,然后在onmouseover事件中再执行clearTimeout方法,这样就可以避免内部元素引起的事件干扰。具体的执行过程请看下图(纵向的虚线表示时间): 
    这是个很巧妙的的方法,因为当onmouseout触发后,实质性的方法并没有马上执行,而是要等待一小段时间。如果在这段时间里马上又触发了 onmouseover事件,那么基本上就可以肯定onmouseout事件的触发是因为内部元素的干扰了,所以在onmouseover事件中使用 clearTimeout来阻止延时的方法执行。二.contains在onmouseover时先进行如下判断,结果为true时再执行方法体:
    var s = e.fromElement || e.relatedTarget ;
    if(!this.contains(s)){MouseOverFunc()}在onmouseout时先进行如下判断,结果为true时再执行方法体:
    var s = e.toElement || e.relatedTarget ;
    if(!this.contains(s)){MouseOutFunc()}
     下面来解释一下上面两行代码的含义:在IE中,所有的HTML元素都有一个contains方法,它的作用是判断当前元素内部是否包含指定的元素。我们利用这个方法来判断外层元素的事件是不是因为内部元素而被触发,如果内部元素导致了不需要的事件被触发,那我们就忽略这个事件。event.fromElement指向触发onmouseover和onmouseout事件时鼠标离开的元素;event.toElement指向触发onmouseover和onmouseout事件时鼠标进入的元素。那么上面两行代码的含义就分别是:○ 当触发onmouseover事件时,判断鼠标离开的元素是否是当前元素的内部元素,如果是,忽略此事件;○ 当触发onmouseout事件时,判断鼠标进入的元素是否是当前元素的内部元素,如果是,忽略此事件;这样,内部元素就不会干扰外层元素的onmouseover和onmouseout事件了。但问题又来了,非IE的浏览器并不支持contains函数,不过既然我们已经知道了contains函数的作用,就可以自行添加如下的代码来为非IE浏览器增加contains支持:if(typeof(HTMLElement) != "undefined"){HTMLElement.prototype.contains = function(obj){            while(obj != null &&  typeof(obj.tagName) != "undefined")            {if(obj == this)return true;obj = obj.parentNode;}   return false;  };  }
      

  3.   

    用jquery比较简单,请自行更换jquery的引入路径<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <META NAME="Generator" CONTENT="EditPlus">
      <META NAME="Author" CONTENT="">
      <META NAME="Keywords" CONTENT="">
      <META NAME="Description" CONTENT="">
       <style type="text/css">
    div {
    margin:5px;
    border:#000 1px solid;
    float:left;
    font-size:17px;
    font-family:Verdana;
    }
    </style>
      <script type="text/javascript" src="../js/jquery-1.4.4.min.js"></script>
      <script type="text/javascript">
    $(document).ready(function(){
    //移出外部DIV,隐藏DIV
    $('.one').mouseout(function(){
    $('.one').hide()
    });
    //进入内部DIV和外部DIV就显示外部DIV。
    //这里多加了一个外部div的mouseover的原因是:当鼠标从内部DIV到外部DIV时,
    //也会触发外部DIV的mouseout。所以此处增加一个外部DIV的mouerover方法
    $('.one,.one div').mouseover(function(){
    $('.one').show()
    });
    });
      </script>
     </HEAD> <BODY>
      <div style="width:600px;height:600px" class="one">外部DIV
      <div style="width:100px;height:100px" >内部DIV</div>
      <div style="width:100px;height:100px" >内部DIV</div>
      <div style="width:100px;height:100px" >内部DIV</div>
      <div style="width:100px;height:100px" >内部DIV</div>
      </div>
     </BODY>
    </HTML>
      

  4.   

    你可以给对象进行事件绑定啊
    $.fn.PL_rilifunction(Option){
       //你可以在这里边针对对象绑定各种事件,例如
       $(this).mouseover(function(){})
       $(this).click(function(){})
    }
    //用法:
    //$("#rili").PL_rili(option);
      

  5.   

    http://hi.baidu.com/see7di/blog/item/c3a8bcc3f1e43e43b219a8ee.html
    你可以看看我的这个事件绑定的例子