Html 当鼠标点击外部区域时，我可以关闭我的灯箱吗（仅CSS）_Html_Css

Html 当鼠标点击外部区域时，我可以关闭我的灯箱吗（仅CSS）

html css

Html 当鼠标点击外部区域时，我可以关闭我的灯箱吗（仅CSS）,html,css,Html,Css,这个lightbox功能很好，但我很好奇，在没有Javascript的情况下，每当单击周围区域时，如何关闭它。用Javascript/JQuery实现这一点非常简单，但我想看看如果没有这两种语言，如何实现这一点。谢谢 .black_overlay{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height

这个lightbox功能很好，但我很好奇，在没有Javascript的情况下，每当单击周围区域时，如何关闭它。用Javascript/JQuery实现这一点非常简单，但我想看看如果没有这两种语言，如何实现这一点。谢谢

    .black_overlay{
        display: none;
        position: absolute;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        background-color: black;
        z-index:1001;
        -moz-opacity: 0.8;
        opacity:.80;
        filter: alpha(opacity=80);
    }
    .white_content {
        display: none;
        position: absolute;
        top: 20%;
        left: 20%;
        width: 55%;
        height: 55%;
        padding: 16px;
        border:  1px solid lightgray;
        background-color: white;
        z-index:1002;
        overflow: auto;
    }

<body>
    <p> <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">click here</a></p>
    <div id="light" class="white_content">Content and stuff. <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div>
    <div id="fade" class="black_overlay"></div>
</body>

。黑色覆盖{
显示：无；
位置：绝对位置；
最高：0%；
左：0%；
宽度：100%；
身高：100%；
背景色：黑色；
z指数：1001；
-moz不透明度：0.8；
不透明度：.80；
过滤器：α（不透明度=80）；
}
.white_内容{
显示：无；
位置：绝对位置；
最高：20%；
左：20%；
宽度：55%；
身高：55%；
填充：16px；
边框：1px实心浅灰色；
背景色：白色；
z指数：1002；
溢出：自动；
}

内容和东西。

一个快速的谷歌搜索仅CSS lightbox发现了这个有趣的代码笔示例，作者是Gregory Schier（全学分）

Gregory正在使用

：target

psuedo类选择器显示灯箱，方法是将其显示属性设置为

block

，从而使灯箱可见

.lightbox {
    display: none;
}

.lightbox:target {
    display: block;
}

灯箱的目标状态由




不要忘了在lightbox id前面加上链接的href属性，该链接用#
来包装缩略图（如上图所示）
再次感谢Gregory Schier
对于仅CSS的解决方案，您可以采用CSS：focus
作为Javascriptonclick
的（稍微做作的）替代品
当然，
元素自然不支持：focus
，因此还需要添加contentEditable=“true”
，以便它可以接受：focus
：

。黑色覆盖{
显示：无；
位置：绝对位置；
最高：0%；
左：0%；
宽度：100%；
身高：100%；
背景色：黑色；
z指数：1001；
-moz不透明度：0.8；
不透明度：.80；
过滤器：α（不透明度=80）；
}
.white_内容{
显示：无；
位置：绝对位置；
最高：20%；
左：20%；
宽度：55%；
身高：55%；
填充：16px；
边框：1px实心浅灰色；
背景色：白色；
z指数：1002；
溢出：自动；
}
p{
显示：内联块；
}
a{
颜色：rgb（0,0255）；
光标：指针；
文字装饰：下划线；
}
p:focus~#light，p:focus~#fade{
显示：块；
游标：默认值；
}
单击此处
内容和东西。关闭
<a href="#[LIGHTBOX_ID]">
  <img src="../path/to/image-thumbnail.jpg">
</a>

<a href="#_" id="[LIGHTBOX_ID]">
  <img src="..path/to/image-full.jpg">
</a>