0

「red」と「green」というクラス名の 2 つの div があります。緑の div は非表示になっていますが、マウスを赤い div の上に置くと、緑の div が表示されます。ただし、緑の div が赤の div の前に表示されています。赤の div にカーソルを合わせると、その下に緑の div が表示されるように、順序を逆にしたいと考えています。赤の div を緑の div の上に配置します)。緑のdivが実際にPNGの下に表示されるように、実際には赤いdivの中に背景のPNGを含めたいと思います。

緑の div は赤の div 内にネストされ、私の CSS は次のとおりです。

.green{
    display: none;
}

.red:hover .green{
    display: block;
}
4

3 に答える 3

1

でレイヤーの順序を変更できますz-index

赤を常に上に置き、テキストを置かない場合は、次のようにします。

z-index:9999;

それについてもっと知りたい場合は、このチュートリアルを使用してください: z-index

于 2013-06-03T13:49:33.117 に答える
0

HTML

<div class="wrapper">
    <div class="red"></div>
    <div class="green"></div>
</div>

CSS

.wrapper {
    position: relative;
     height: 50px;
     width: 50px;
}
.red {
    top:0;
    left: 0;
    position: absolute;
    height: 100%;
    width: 100%;
    background-color:#d42046;
    z-index:2;
}
.green {
    top: 0;
    left: 0;
    position: absolute;
    display: none;
    height: 60px;
    width: 60px;
    background: #1cc477;
    z-index:1;
}
.wrapper:hover .green {
    display: block;  
}

デモ：

jsフィドル

于 2013-06-04T00:38:47.553 に答える
0

赤の div は緑の div 内にネストされており、赤の div は非表示になっているため、赤の div にカーソルを合わせる方法がわかりません。したがって、赤の div も非表示にする必要があります。

しかし、私はいくつかのことを変更しました。を使用positionし、z-index緑を赤の div 内にネストしました。

HTML

<div class="red">
    <div class="green">
    </div>
</div>

CSS

.green {
    display: none;
    background: green;
    width: 310px;
    height: 310px;
    margin-left: -5px;
    position: relative;
    z-index: -1;
}
.red {
    background: red;
    width: 300px;
    height: 300px;
    margin: 5px;
}
.red:hover .green {
    display: block;
}

緑の div のサイズを少し大きくし、余白を追加して見えるようにしました。

これがライブの例ですhttp://jsfiddle.net/PaulvdDool/FpsuA/

于 2013-06-03T14:58:37.507 に答える