[英]Is it possible to show a div on click using the :active selector in CSS?
I'm looking to show a div
on click
. 我想在
click
显示div
。 The goal is to use pure CSS only, no jQuery. 目标是仅使用纯CSS ,不使用jQuery。
Working FIDDLE Demo
工作FIDDLE演示
Consider that you want something like this: 考虑一下你想要这样的东西:
We write our markup as simple as possible. 我们尽可能简单地编写标记。 One element for
container
, one element for our link
and one another element for popup
: 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] -->
Here is our layer structure in picture: 这是我们的图层结构:
Let's write CSS for our 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;
}
[!]
Note that we make our container relative
. [!]
请注意,我们使容器relative
。 Because the children will be in absolute
mode. absolute
模式。 We create our link
as an absolute element from left, just as shown in the figure above. 我们从左侧创建
link
作为绝对元素,如上图所示。
.link {
background: blue;
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 100px;
z-index: 10;
}
The dimention of popup
element is same as the container, so we set all top
, left
, right
, bottom
properties to 0
. popup
元素的维数与容器相同 ,因此我们将所有top
, left
, right
, bottom
属性设置为0
。
.popup {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: green;
z-index: 20;
}
[!]
Note that z-index
of popup
element must be greater than link
element. [!]
请注意, popup
元素的z-index
必须大于link
元素。 .popup {
/* we won't show the popup yet */
display: none;
}
By now, we'll get this result ( check it on jsFiddle ): 到现在为止 ,我们将得到这个结果( 在jsFiddle上查看 ):
Now we want the click
for our link. 现在我们想
click
我们的链接。 This must be done with :active
pseudo selector in CSS. 这必须使用
:active
CSS中的:active
伪选择器。 But how we must show the poup
? 但是我们必须如何展示
poup
? We have to get the next sibling element by the link
. 我们必须通过
link
获得下一个兄弟元素。 We use the +
selector in CSS: 我们在CSS中使用
+
选择器:
.link:active + .popup {
display: block;
}
See the result on jsFiddle . 在jsFiddle上查看结果。 But the problem is that when user realize the mouse, the popup will disappear (as it
display
is set to none
). 但问题是,当用户意识到鼠标时,弹出窗口将消失(因为它
display
为none
)。 So we set the :hover
rule for the popup
and make it block
. 因此我们为
popup
设置:hover
规则并使其block
。
.popup:hover {
display: block;
}
Check the jsFiddle demo . 查看jsFiddle演示 。 Now we get close enough.
现在我们足够接近了。 The only issue that the
popup
element, hide our link
. popup
元素唯一的问题, 隐藏我们的link
。 But it doesn't matter, because we won't set background
for our popup
(it will be transparent
). 但这没关系,因为我们不会为
popup
设置background
(它将是transparent
)。
For wanted text
in popup
element, we set this rules: 对于
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;
}
Check the jsFiddle demo . 查看jsFiddle演示 。 Now we have all things that we need.
现在我们拥有了所需的一切。
Now it's time to make our popup
element transparent
(by setting the background
as transparent
or simply remove the background: green;
rule): 现在是时候让我们的
popup
元素transparent
(通过将background
设置为transparent
或简单地删除background: green;
规则):
.popup {
background: transparent;
}
And here is the final jsFiddle result . 这是最终的jsFiddle结果 。 And if you add some extra CSS to it, it can be more stylish.
如果你添加一些额外的CSS,它可以更时尚。 Something like this that I've created.
我创造了这样的东西。
Some important note to memorize: 记住一些重要的注意事项:
link
(blue one) and the popup
(gray one). link
(蓝色)和popup
(灰色)之间存在间隙。 But the fact is that the gray element is not our popup
. popup
。 It's a child of popup
and our popup is an 100% width and height element on the container. popup
的子项,我们的弹出窗口是容器上的100%宽度和高度元素。 Another way is to use the :target property (only works in moderns browsers). 另一种方法是使用:target属性(仅适用于现代浏览器)。
Here's a qucik DEMO where I've hidden the div by applying opacity: 0;
这是一个qucik DEMO ,我通过应用
opacity: 0;
隐藏div opacity: 0;
and the when you click the link the div changes to opacity: 1;
当你点击链接时,div变为
opacity: 1;
The link and the div are matched using a hash in the url. 使用url中的哈希匹配链接和div。
Here's the code from my example. 这是我的例子中的代码。
HTML HTML
<a href="#pop">Click me</a>
<br />
<div id="pop"></div>
CSS CSS
#pop {
width: 100px;
height: 100px;
background: #000;
opacity: 0;
}
#pop:target {
opacity: 1;
}
There are some side effects though. 但是有一些副作用。 The browser will jump/scroll down (not sure if it's possible to prevent this?) to the matched div and since we are using a hash in the url it will effect the browser history and, as mentioned above, it only works in modern browsers.
浏览器会跳转/向下滚动(不确定是否可以防止这种情况?)到匹配的div,因为我们在url中使用哈希值会影响浏览器历史记录,如上所述,它只适用于现代浏览器。
EDIT If you want to look into other hack/tricks for pure CSS click events, this is a good post - http://tympanus.net/codrops/2012/12/17/css-click-events/ 编辑如果你想查看纯CSS单击事件的其他黑客/技巧,这是一个很好的帖子 - http://tympanus.net/codrops/2012/12/17/css-click-events/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.