:target 伪类在 Firefox 中无法正常工作

Question

我正在使用 :target 伪类制作具有 CSS 灯箱类型效果的页面。当您单击图像时，会弹出一个包含信息的框，当您单击任意位置时会再次消失。

它在 Chrome 和 IE 中运行良好，但在 Firefox 中存在一个奇怪的错误，即 当您将鼠标移离框时，我的灯箱 div 中的文本会消失。它的作用类似于悬停效果，只有将鼠标悬停在其上时才能看到文本。

我希望解释是有道理的，如果我不清楚，请告诉我。

我的 CSS 在这里：

.lightbox {
display: none;
position: absolute;
z-index: 8;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #fff; 
padding-left: 30px;
}

.lightbox:target {
/* Show lightbox when it is target */
display: block !important;
outline: none;
}

如果您需要更多信息，请告诉我。

非常感谢！

Answer 1

伪类目标适用于 id 元素，而不是 类： https://developer.mozilla.org/en-US/docs/Web/CSS/:target

:target 伪类表示唯一元素（如果有），其 id 与文档 URI 的片段标识符匹配。

尝试在 CSS 中将 .lightbox 替换为 #lightbox，您的 HTML 元素应为 <div id="lightbox">

#lightbox {
    display: none;
    position: absolute;
    z-index: 8;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #fff; 
    padding-left: 30px;
}

#lightbox:target {
    /* Show lightbox when it is target */
    display: block !important;
    outline: none;
}