0

我正在为创建一个在悬停时淡化背景的菜单栏奠定基础。背景将是整个页面，使用一个半透明的 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 的代码之上）

4

1 回答 1

2

只有被定位的项目（例如，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

于 2013-02-13T22:37:58.163 回答