1

私は次のコードを持っています:

<!DOCTYPE html>
<html>
    <head>
        <title>Void Museum</title>
        <meta charset="utf-8">
        <style type="text/css">
        html * {
            margin: 0;
            padding: 0;
            }
        #panel,
        #content {
            position: absolute;
            top: 0;
            bottom: 0;
            }
        #panel {
            left: -220px;
            width: 250px;
            background: #030;
            -webkit-transition: all 0.5s;
               -moz-transition: all 0.5s;
                -ms-transition: all 0.5s;
                 -o-transition: all 0.5s;
                    transition: all 0.5s;
            }
        #content {
            left: 250px;
            right: 0;
            background: #003;
            }
        #panel:target {
            left: 0;
            background: red;
            }
        #content:target {
            background: yellow;
            }
        </style>
        <script type="text/javascript">
        </script>
    </head>
    <body>
        <div id="panel">
            LEFT PANEL
        </div>
        <div id="content">
            CONTENT
        </div>
    </body>
</html>

そして2つの質問：

  • パネルをクリックしても出てこないのはなぜですか?

  • がターゲットになっている場合、#content ブロックのleftプロパティを強制的に 250px にするにはどうすればよいですか? #panel相対位置を使用するようにこれをすべて変更する必要がありますか? #contentもしそうなら、どうすればページの右側がオーバーフローしないように強制できますか?

このコードは、:hover代わりに使用すると機能:targetするので、理解できないことがあると思います:target。

前もって感謝します ：）

4

1 に答える 1

4

機能しない理由は:target、存在しない「is-clicked」などを使用しているためです。CSS では、その動作を模倣できるものは次のとおりです。

id への href を作成し (例: #panel)、それをクリックします。これで、URL に #panel が追加され、使用を開始できます:target

こちらをご覧ください

テキストは #panel にリンクし、:target「クリック」されたかのようにアクティブ化し、機能できるようにします。

于 2012-11-15T13:58:25.773 に答える