html - 在没有 JS 的情况下显示带有 ID 链接 CSS 的两个 Div - 覆盖和内容

Question

我正在尝试使用 css 显示带有 href 链接的 div。到目前为止，我的以下标记很简单:

<div id="container">
    <div id="row1">
        <a href="#content"><div id="box1"></div></a>

        <div id="box2"></div>
    </div>

当您单击“box1”(这是一个带有背景图片的链接)时，我希望它显示一个带有“content”id 的 div。 “content”div 位于另一个具有 id="overlay"的 div 中。

我想单击链接并同时显示覆盖 div 和内容 div。我不想使用 javascript。我可以使用 :target 并显示一个 div 就好了，例如“内容”div 或“覆盖”div。

“overlay”和“content”div 的标记:

<div id="overlay">
    <a href="#close">
        <div class="content">
            <strong class="closebutton" title="Close Content">X</strong>
                <h1>Awesome DIV Layer Technique</h1>
                <hr>
                <p>Content Goes Here</p>
        </div>
    </a>
</div>

我现在的亲戚 CSS:

#content{
display: none;
width: 460px;
padding: 20px;
background: #fff;
color: #000;
margin: 0 auto;
text-align: left;
cursor: auto;
position: relative;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

#overlay{
display: none;
position: absolute;
background: rgb(0,0,0);
background: rgba(0,0,0,0.7);
width: 100%;
height: 100%;
padding: 0;
top: 0;
left: 0;
z-index: 1;
opacity: 0.9;
color: #FFFFFF;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, 
sans-serif;
}

#overlay:target{
display: table-cell;
vertical-align: middle;
text-align: center;
}

#close #overlay:target{
display: none;
}

我已经尝试通过使用类选择器并组合它们来调整我能想到的所有我的 css，但我似乎无法找出正确的方法来实现这一目标。我知道我可以使用“#overlay div{”，但我打算将其用于多个链接和内容 div，因此我需要能够指定彼此的 div。

提前致谢。

Answer 1

决定使用 Futurebox技术。我不得不完全重建 css 以满足我的需要，但这似乎在每个浏览器中都可以正常工作。 lightbox顺便说一下，方式在 IE10 中毫无值(value)。如果有人真的想看到解决方案，请给我留言。但实际上，这与我的 div 在标记中的位置有关，而不是与样式有关。必须记住，他们不会无缘无故地称它们为“级联”样式表。必须编写一些好的类才能正确查看所有内容，仅此而已。