转：z-index失效及onmouseout失效问题

原文地址：http://xinple.org/?p=422

z-index失效及onmouseout失效（闪烁）问题

两个都是小技巧问题，就写一起吧。其实并不是失效，而是用的方法不对。

先说z-index，当position为relative或者absolute或者fixed的时候，可以使用z-index指定当前元素的层级关系，值越大元素就越在上面，从而实现盖住下面元素的目的。但是遇到下面这种情况，会发现z-index值大的确盖不住值小的元素：

1 2 3 4 5 6 7 8 9 10

<style> li { position: relative; width: 100px; height: 50px; background: blue; margin-bottom: 10px; z-index: 1; } a { position: absolute; top: 0; left: 0; display: block; width: 80px; height: 100px; } .a1 { background: red; width: 50px; z-index: 3; } .a2 { background: yellow; z-index: 2; } </style> <ul> <li><a href="#" class="a1">xinple</a></li> <li><a href="#" class="a2">org</a></li> </ul>

代码运行结果

可以看到，第一个li里面的a元素z-index为3，但是盖不住第二个li里面z-index为2的a元素（如果不设置li的z-index，firefox可以但IE6不行）。这是因为z-index会传递父元素的值，当第一个li中的a去覆盖第二个li里面的a时，因为父元素li的z-index值为1，所以盖不住值为2的元素了，这时候只需要设置父元素的z-index的值大于下面的a2，就实现了：

1	<li style="z-index:4"><a href="#" class="a1">xinple</a></li>

代码运行结果

如果是在同一个父元素下面，则按照z-index值大小来层叠，注意，不管父元素z-index值多大，子元素都能盖再其上面。

再来说onmouseout事件失效的问题，做下拉菜单的时候，鼠标放上去onmouseover下拉菜单出现，移开onmouseout则消失，但有时候我们会发现鼠标移动到子菜单的时候会出现闪烁问题，这个往往就是onmouseout失效的原因了。

为什么会失效？是因为javascript冒泡的问题，当从父元素移动到子元素的时候，会冒泡到父元素从而触发父元素的onmouseout事件，虽然从界面上看鼠标并没有移出父元素。查看下面的例子：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<style> div { width: 100px; } div span { display: block; background: green; } ul { display: none; } li { background: red; margin: 10px 0; } </style> <script> $("div").mouseover(function(){ $("ul").slideDown(); }).mouseout(function(){ $("ul").slideUp(); }); </script> <div> <span>下拉菜单</span> <ul> <li>子菜单1</li> <li>子菜单2</li> </ul> </div>

代码运行结果

上面这个例子为了让效果更明显，除了增加了子菜单的margin，并使用了jQuery的slideDown动画效果，可以看到鼠标放到子菜单的时候，就闪烁了，很崩溃吧？平时没发现可能是子菜单整个覆盖了父元素，所以鼠标不够明显的从父元素移动到子元素；或者没有用动画啥的特效，其实已经经历了从消失到重新显示的过程，没发觉而已。

解决这个问题很简单，不要冒泡到父元素就行了。纯js的做法就是判断当前元素是否是子元素，是的话，就不冒泡到父元素，但是考虑到浏览器兼容问题，要分别对IE和其他浏览器hack，我js水平有限，加上代码较长，这里就不献丑。

使用jQuery就能很完美的解决这个问题，那就是jQuery支持了IE only的onmouseleave事件，查看jQuery官方API的说明就知道了。mouseleave事件不会冒泡到父元素，把mouseout换为mouseleave从而解决了这个问题。

运行查看修改后的代码 可以看到，不再闪烁了

$("div").mouseover(function(){

    $("ul").slideDown();

}).mouseleave(function(){

    $("ul").slideUp();

});