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

Question

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

Answer 1

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

以下是图片中的图层结构：

<小时/>

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作为绝对元素，如上图所示。

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

<小时/>

POPUP

popup元素的维度与容器的相同，因此我们设置了所有top，left，right，{{1属性bottom。

0

• .popup { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: green; z-index: 20; } 请注意，[!]元素的z-index必须大于popup元素。

link

到现在为止，我们将得到此结果（check it on jsFiddle）：

---

现在我们想要.popup { /* we won't show the popup yet */ display: none; } 作为我们的链接。必须使用CSS中的click伪选择器完成此操作。但是我们必须如何显示:active？我们必须通过poup获取下一个兄弟元素。我们在CSS中使用link选择器：

+

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

block

检查jsFiddle demo。现在我们足够接近了。唯一的问题是.popup:hover { display: block; } 元素，隐藏我们的popup。 但这没关系，因为我们不会为link设置background（它将是popup）。

---

TEXT

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

popup

检查jsFiddle demo。现在我们拥有了所需的一切。

---

现在是时候制作我们的.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; } 元素popup了（将transparent设为background或只删除transparent规则）：

background: green;

---

这是最后的jsFiddle result。如果你添加一些额外的CSS，它可以更时尚。 Something like this that I've created.

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

• 在最终结果中，.popup { background: transparent; } （蓝色）和link（灰色）之间存在差距。但事实是灰色元素不是我们的popup。它是popup的孩子，我们的弹出窗口是容器上的100％宽度和高度元素。

Working FIDDLE Demo 的

Answer 2

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

这是一个qucik DEMO，我通过应用opacity: 0;来隐藏div，当你点击div更改为opacity: 1;的链接时，链接和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/