考虑一下你想要这样的东西:
我们尽可能简单地编写标记。 container的一个元素,link的一个元素和popup的另一个元素:
以下是图片中的图层结构:
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
现在我们想要.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;
记住一些重要的注意事项:
在最终结果中,.popup {
background: transparent;
}(蓝色)和link(灰色)之间存在差距。但事实是灰色元素不是我们的popup。它是popup的孩子,我们的弹出窗口是容器上的100%宽度和高度元素。