css - :target pseudo-class not working properly in 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 元素，而不是 classes: https://developer.mozilla.org/en-US/docs/Web/CSS/:target

The :target pseudo-class represents the unique element, if any, with an id matching the fragment identifier of the URI of the document.

尝试在您的 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;
}