html - 是否可以使用 :active selector in CSS? 在点击时显示一个 div

Question

我希望在点击 时显示一个div。目标是仅使用纯 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] -->

这是图片中的层结构:

---

容器

让我们为容器编写 CSS。

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

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

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

• [!] 请注意，我们使我们的容器相对。因为子级将处于 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;
}

现在，我们将得到这个结果(check it on jsFiddle):

---

现在我们需要链接的click。这必须通过 CSS 中的 :active 伪选择器来完成。但是我们必须如何显示 poup？我们必须通过 link 获取 next sibling 元素。我们在 CSS 中使用 + 选择器:

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

查看 jsFiddle 上的结果.但问题是，当用户意识到鼠标时，弹出窗口将消失(因为它的 display 设置为 none)。所以我们为 popup 设置了 :hover 规则并让它成为 block。

.popup:hover {
    display: block;
}

检查 jsFiddle demo .现在我们已经足够接近了。 popup 元素的唯一问题是隐藏我们的链接。但这没关系，因为我们不会为我们的 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 demo .现在我们拥有了所需的一切。

---

现在是时候让我们的 popup 元素透明(通过将 background 设置为 transparent 或简单地删除background: green; 规则):

.popup {
    background: transparent;
}

---

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

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

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

Working FIDDLE Demo