0

ホバーしたときに背景がフェードするメニュー バーを作成するための基礎作業を行っています。背景は、半透明でページ全体に配置された png グラフィックを使用したページ全体になります。

私はjqueryで仕事をしていますが、透明なpng divレイヤーの「下」にないようにしようとしているメニューdivのz-indexを無視しているようです。

要約すると、ページが読み込まれ、透明な png が作業領域 (#overlay) を完全にカバーする div があります。#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

提案：

Web ページ全体に画像を使用するのを避けたい場合は、単色の背景色を使用し、アニメーション中に を使用して不透明度を変えることもできます.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 に答える