层重叠时，鼠标作用到最上面层，怎样使底下的层也能捕获事件？

层重叠时，鼠标作用到最上面层，怎样使底下的层也能捕获事件？应用：
鼠标移动到一个层，该层变成蓝色，同时在该层上绝对定位显示另一个层（提示层），鼠标离开这个层时，该层恢复成绿色。
但要求鼠标移动该层的提示层时，不出发鼠标离开效果。例子：
<!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>覆盖层鼠标事件</title>
</head><body>
<div id="green" style="width:300px;height:300px; background:#0C6" onmouseover="this.style.background='blue';" onmouseout="this.style.background='green';">
</div>
<div id="red" style="position:absolute; width:100px; height:100px; background:#F00; left: 100px; top: 100px;"></div>
</body>
</html>
谢谢！

解决方案 »

  1.   

    不好意思刚才没看清楚意思
    当红色层得到焦点时将绿色层mouseout的事件取消，当离开红色层的时候在将绿色层mouseout的事件赋上就行了
      

  2.   

    red放在green内部即可。<body>
        <div id="green" style="width: 300px; height: 300px; background: #0C6" onmouseover="this.style.background='blue';"
            onmouseout="this.style.background='green';">
            <div id="red" style="position: absolute; width: 100px; height: 100px; background: #F00;
                left: 100px; top: 100px;">
            </div>
        </div>
    </body>
      

  3.   

    谢谢。
    这样目的是达到了。
    最终目的是想移动到红色时，绿色的onmouseout事件不要执行。