Question

我正在为创建一个在悬停时淡化背景的菜单栏奠定基础。背景将是整个页面使用半透明的png图形并定位在整个页面上。

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

概括 - 页面加载，并且有一个透明的png完全覆盖工作区域的div（#overlay）。 #overlay div也设置为display：none;所以它最初没有显示。当鼠标悬停在菜单div上时，叠加div会覆盖工作区域。菜单div设置为z-index：20，overlay 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

Jquery淡入fadeOut低于z-index div

1 个答案: