1

これを達成する必要があります: 赤いボックスにカーソルを合わせると紫色のボックスが消え、オレンジ色のボックスにカーソルを合わせると青色のボックスが消え、黄色のボックスにカーソルを合わせると緑色のボックスが消えます。私はそれを行うことができましたが、逆も行う必要がありますが、試したことはすべてうまくいきませんでした。誰でも私を助けることができますか？

<html>
<head>
    <title>Boxes</title>
    <style type"text/css">
    div {
        width:70px;
        height:90px;
        border:3px solid #000;
    }
    .t1 {
        background: red;
        top: 50px;
        left: 15px; 
        position: absolute;
    }
    .t1:hover + .t6{
        background: red;
        top: 50px;
        left: 15px; 
        z-index: 1;
        position: absolute;
        visibility: invisible;
    }
    .t2 {
        position: absolute;
        background:orange;
        top: 100px;
        left: 60px;
    }
    .t2:hover + .t5 {
        position: absolute;
        background:orange;
        top: 100px;
        left: 60px;
        z-index: 1;
        visibility: invisible;
    }
    .t3 {
        background:yellow;
        top: 150px;
        left: 110px;
        position: absolute;
    }
    .t3:hover + .t4 {
        background:yellow;
        top: 150px;
        left: 110px;
        position: absolute;
        visibility: invisible;
        z-index: 1;
    }
    .t4 {
        background:green;
        top: 200px;
        left: 160px;
        position: absolute;
    }
    .t5 {
        background:blue;
        top: 250px;
        left: 210px;
        position: absolute;
        z-index: 1;
    }
    .t6 {
        background:purple;
        top: 300px;
        left: 260px;
        position: absolute;
        z-index: 2;
    }


    <!--backwards-->


    </style>
</head>
<body>


    <div class="t1"></div>
    <div class="t6"></div>
    <div class="t2"></div>
    <div class="t5"></div>
    <div class="t3"></div>
    <div class="t4"></div>


</body>

4

3 に答える 3

1

CSSは現在、「下向き」の方法でのみ機能します。これは、親から子へ、または最初の兄弟から次の兄弟へしか移動できないことを意味します。あなたは「上に」行くことはできません-子供から親へ、または2番目の兄弟から最初へ。

つまり、 t1はt6の前にあるため、現在のHTML構造では実行できます（t1の隣にある場合はt6を選択します）が、現在のHTML構造でt1 + t6は実行できませんt6 + t1（t6の隣にある場合はt1を選択します）。

DOMをトラバースする唯一の方法は、JavaScriptを使用することです。

于 2013-02-22T22:19:14.477 に答える
0

可能です！いくつかのトリックで :P いくつかのボックスを並べ替えて、コンテナで遊んでください。

最終的な解決策: http://jsfiddle.net/vd7km/4/

私はCSSで遊んでいますが、私の作品を確認できます：http://jsfiddle.net/vd7km/

<div class="cont" id="cont1" >
  <div id="d1" ></div>
  <div id="d2" ></div>
</div>

マジックコードは次のとおりです。

.cont div:first-child:hover + div {
    visibility: hidden;
}

.cont:hover div:first-child {
    visibility: hidden;
}
.cont:hover div:first-child:hover {
    visibility: visible !important;
}

更新しました!: http://jsfiddle.net/vd7km/2/

さらに 2 つとコードのリファクタリング。

ほぼ完了: http://jsfiddle.net/vd7km/3/

完了しました: http://jsfiddle.net/vd7km/4/

プレイさせてくれてありがとう:-)

于 2013-02-22T22:52:17.357 に答える
0

CSSだけでは無理。代わりに JavaScript を使用してください。

于 2013-02-22T20:55:45.693 に答える