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>

还有两个问题：

  • 为什么我点击后面板不出来？

  • 当被定位时，我如何将#content 块的left属性强制为 250 像素#panel？我应该改变这一切以使用相对位置吗？如果是这样，我将如何强制#content不要溢出页面右侧？

当我使用:hover而不是时，这段代码确实有效，:target所以我假设有些东西我不明白:target。

提前致谢 ：）

4

1 回答 1

4

它不起作用的原因是因为您使用:target的是“被点击”或类似的，它不存在。在 CSS 中，可以模仿该行为的内容如下：

您对一个 id （例如#panel）创建一个 href，然后单击它。现在您的网址上有一个#panel，可以开始使用:target

看这里

文本链接到#panel，激活:target并允许它像“单击”一样工作。

于 2012-11-15T13:58:25.773 回答