0

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

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

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

当您单击“box1”（这是一个带有背景图像的链接）时，我希望它显示一个带有“内容”ID 的 div。“内容” div 位于另一个 id="overlay" 的 div 中。

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

“覆盖”和“内容”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。

提前致谢。

4

1 回答 1

0

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

于 2013-06-18T05:43:03.670 回答