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

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

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

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

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

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

12345678910

1
1234567891011121314151617181920
<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();
});