3

我正在寻找div在click. 目标是只使用纯 CSS，不使用 jQuery。

4

2 回答 2

18

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模式中。

在此处输入图像描述

关联

我们从左边创建我们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;
    }
  • [!]注意z-indexof popupelement 必须大于linkelement。

在此处输入图像描述

.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为 the 设置规则popup并制作它block。

.popup:hover {
    display: block;
}

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

文本

对于想要text的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（通过设置backgroundastransparent或简单地删除background: green;规则）：

.popup {
    background: transparent;
}

在此处输入图像描述

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

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

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

Working FIDDLE Demo

于 2013-05-14T08:42:27.590 回答
2

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

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

这是我的示例中的代码。

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/

于 2013-01-15T07:11:09.337 回答