Question

我有以下代码：

<!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块的#panel属性强制为250像素？我应该改变这一切来使用相对位置吗？如果是这样，我如何强制#content不要溢出页面的右侧？

当我使用:hover代替:target时，此代码可以正常运行，因此我假设我对:target有一些不了解的内容。

提前致谢：）

Answer 1

也可以将我的评论写成完整的答案。

它不起作用的原因是因为您使用:target作为“点击”或类似的，这是不存在的。存在的是可以模仿该行为的东西。您为ID（例如#panel）创建了一个href，然后单击它。现在，您的网址上有#panel，可以开始使用:target

请参阅here

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

CSS3：目标不工作？

1 个答案: