考虑一下你想要这样的东西：
我们尽可能简单地编写标记。 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％宽度和高度元素。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
