z-index失效及onmouseout失效问题_亮仔_新浪博客

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

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

1 2 3 4 5 6 7 8 9 10

xinple org

代码运行结果

可以看到，第一个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

xinple

代码运行结果

如果是在同一个父元素下面，则按照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

下拉菜单 子菜单1 子菜单2

代码运行结果

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

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

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

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