是否可以使用 CSS 中的 :active 选择器在点击时显示 div？

我想展示一个div on click。目标是使用pure CSS只有，没有 jQuery。

Working FIDDLE Demo

考虑一下您想要这样的东西：

我们尽可能简单地编写标记。一个元素为container，我们的一个元素link和另一个元素popup:

<!-- [container] -->
<div class="link-with-popup">

    <!-- link -->
    <div class="link">CSS</div>

    <!-- [popup] -->
    <div class="popup">
        <div class="box">CSS Description</div>
    </div>
    <!-- [/popup] -->

</div>
<!-- [/container] -->

这是我们的层结构图中：

容器

让我们为容器编写 CSS。

.link-with-popup {
    /* for visualizing */
    background: yellow;

    /* we need relative, because childs are absolute */
    position: relative;

    margin-bottom: 10px;
    height: 30px;
    width: 400px;
}

• [!]请注意，我们制作容器relative。因为孩子们将在absolute mode.

LINK

我们创造我们的link作为从左开始的绝对元素，如上图所示。

.link {
    background: blue;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100px;
    z-index: 10;
}

POPUP

维度为popup元素是same作为容器，所以我们设置所有top, left, right, bottom属性到0.

.popup {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: green;
        z-index: 20;
    }

• [!]注意z-index of popup元素必须大于link元素。

.popup {
        /* we won't show the popup yet */
        display: none;
}

现在，我们将得到这个结果（在 jsFiddle 上检查一下):

现在我们想要click对于我们的链接。这必须完成:activeCSS 中的伪选择器。但我们必须如何展示poup？我们必须得到下一个兄弟姐妹元素由link。我们使用+CSS 中的选择器：

.link:active + .popup {
    display: block;
}

查看结果jsFiddle。但问题是，当用户意识到鼠标时，弹出窗口将消失（因为它display被设定为none）。 所以我们设置:hover规则为popup并做到block.

.popup:hover {
    display: block;
}

检查jsFiddle 演示。现在我们已经足够接近了。唯一的问题是popup元素，hide our link。 但这并不重要，因为我们不会设置background为了我们的popup（这将是transparent).

TEXT

对于通缉text in popup元素，我们设置这个规则：

.popup .box {
    position: absolute;

    /* note that we make a gap from left to don't hide the link */
    left: 130px;
    top: 0;
    right: 0;
    bottom: 0;
    background: #505050;
}

检查jsFiddle 演示。现在我们拥有了我们需要的一切。

现在是时候让我们的popup元素transparent（通过设置background as transparent或者简单地删除background: green; rule):

.popup {
    background: transparent;
}

这是决赛jsFiddle结果。如果你添加一些额外的CSS，它会更时尚。我创建了类似的东西。

需要记住的一些重要注意事项：

• 从最终的结果来看，两者之间存在着一定的差距。link（蓝色的）和popup（灰色的）。但事实是灰色元素不是我们的popup。它是一个孩子popup我们的弹出窗口是容器上 100% 宽度和高度的元素。

Working FIDDLE Demo