是否可以使用CSS中的：active选择器显示单击div？

Question

我想在click显示div 。 目标是仅使用纯CSS ，不使用jQuery。

Answer 1

工作FIDDLE演示

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

---

我们尽可能简单地编写标记。 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模式。

---

链接

我们从左侧创建link作为绝对元素，如上图所示。

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

---

弹出

popup元素的维数与容器相同 ，因此我们将所有top ， left ， right ， bottom属性设置为0 。

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

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

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

到现在为止 ，我们将得到这个结果（ 在jsFiddle上查看 ）：

---

现在我们想click我们的链接。 这必须使用:active CSS中的:active伪选择器。 但是我们必须如何展示poup ？ 我们必须通过link获得下一个兄弟元素。 我们在CSS中使用+选择器：

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

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

.popup:hover {
    display: block;
}

查看jsFiddle演示 。 现在我们足够接近了。 popup元素唯一的问题， 隐藏我们的link 。 但这没关系，因为我们不会为popup设置background （它将是transparent ）。

---

文本

对于popup元素中的有用text ，我们设置了以下规则：

.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设置为transparent或简单地删除background: green;规则）：

.popup {
    background: transparent;
}

---

这是最终的jsFiddle结果 。 如果你添加一些额外的CSS，它可以更时尚。 我创造了这样的东西。

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

• 在最终结果中， link （蓝色）和popup （灰色）之间存在间隙。 但事实是灰色元素不是我们的popup 。 它是popup的子项，我们的弹出窗口是容器上的100％宽度和高度元素。

工作FIDDLE演示

Answer 2

另一种方法是使用：target属性（仅适用于现代浏览器）。

这是一个qucik DEMO ，我通过应用opacity: 0;隐藏div opacity: 0; 当你点击链接时，div变为opacity: 1; 使用url中的哈希匹配链接和div。

这是我的例子中的代码。

HTML

<a href="#pop">Click me</a>
<br />
<div id="pop"></div>

CSS

#pop {
  width: 100px;
  height: 100px;
  background: #000;
  opacity: 0;
}

#pop:target {
  opacity: 1;
}

但是有一些副作用。 浏览器会跳转/向下滚动（不确定是否可以防止这种情况？）到匹配的div，因为我们在url中使用哈希值会影响浏览器历史记录，如上所述，它只适用于现代浏览器。

编辑如果你想查看纯CSS单击事件的其他黑客/技巧，这是一个很好的帖子 - http://tympanus.net/codrops/2012/12/17/css-click-events/