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就好了，例如“content”div或“overlay”div。

“overlay”和“content”divs的标记：

<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中毫无价值。如果有人真的想看到解决方案，请给我留言。但实际上这与标记中我的div的放置有关，而不是样式。要记住，他们并没有把它们称为“级联”样式表。不得不写一些好的类来让它全部正确查看，但就是这样。

使用没有JS的ID链接CSS显示两个Div - 覆盖和内容

1 个答案: