CSS3：目标不工作？答案

【问题标题】：CSS3 :target not working?CSS3：目标不工作？
【发布时间】：2012-11-15 12:07:31
【问题描述】：

我有以下代码：

<!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>

还有两个问题：

为什么我点击后面板不出来？
当#panel 是目标时，我如何将#content 块的left 属性强制为250 像素？我应该改变这一切以使用相对位置吗？如果是这样，我将如何强制#content 不溢出页面右侧？

当我使用:hover 而不是:target 时，此代码确实有效，所以我认为:target 有一些我不明白的地方。

提前致谢:)

【问题讨论】：

:target 仅在您将<a href="#panel"> 设置为具有# ID 的元素时才有效。在这里阅读更多：css-tricks.com/on-target
对我的第二个问题有任何想法吗？ :)
css 选择器是针对链接的，所以当它被“点击”时没有一个选择器，因为这意味着链接已被点击，而您将在其他地方。你需要这样做：jsfiddle.net/JHLN4

标签： css transition target stretch

【解决方案1】：

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

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

见here

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

【讨论】：