Jquery fadeIn fadeOut 低于较低的 z-index div

Question

我正在为创建一个在悬停时淡化背景的菜单栏做基础工作。背景将是整个页面，使用一个半透明且位于整个页面上方的 png 图形。

我有 jquery 做它的工作，但它似乎忽略了菜单 div 的 z-index，我试图不在透明 png div 层“下”。

回顾一下 - 页面加载并且有一个带有透明 png 完全覆盖工作区域的 div (#overlay)。 #overlay div 也设置为 display:none;所以它最初没有显示。 当鼠标悬停在菜单 div 上时，覆盖 div 会淡入覆盖工作区域。 菜单 div 设置为 z-index:20 并且覆盖 div z-index 为 10 问题是覆盖 div 覆盖了菜单，似乎不尊重 z-index 图层值。

有人可以帮助我了解如何实现此目标，而无需调整叠加层的大小以排除菜单区域（margin-top = 菜单高度）。

http://jsfiddle.net/ERepZ/

$("#box").hover(function () {
    $(this).children("#overlay").fadeIn();
    }, function () {
$(this).children("#overlay").stop().fadeOut();
});

更新： 此代码将隔离与菜单悬停动作更内联的菜单区域：

var animationSpeed = 400;
var fadeMax = 0.5;
var fadeMin = 0;
$("#menu").hover(function() {
$("#overlay").stop().fadeTo(animationSpeed, fadeMax);
    }, function() {
$("#overlay").stop().fadeTo(animationSpeed, fadeMin);
});

http://jsfiddle.net/sMmSb/1/

（基于下面 Ruben Infante 的代码）

Answer 1

只有定位的项目（例如，position: relative、position: absolute 或 position: fixed）才能使用 z-index。

#menu {
    position: absolute;
    height:50px;
    width: 450px;
    background-color:#999;
    z-index:20;
}

jsfiddle

建议：

如果您不想使用图像来跨越整个网页，您也可以简单地使用纯色背景颜色并在动画期间使用.fadeTo() 改变不透明度。

CSS

#overlay {
    position: absolute;
    display: none;
    top: 0;
    left: 0;
    width: inherit;
    height: inherit;
    background: #000;
    z-index: 10;
}

JS

var animationSpeed = 400;
var fadeMax = 0.5;
var fadeMin = 0;
$("#box").hover(function() {
    $(this).children("#overlay").stop().fadeTo(animationSpeed, fadeMax);
}, function() {
    $(this).children("#overlay").stop().fadeTo(animationSpeed, fadeMin);
});

jsfiddle