Css ：目标伪类在firefox中工作不正常

我正在使用：target伪类制作一个具有CSS lightbox类型效果的页面。当你点击一张图片时，会弹出一个包含信息的框，当你点击任何地方时，框会再次消失

它在Chrome和IE中工作得很好，但在firefox中有一个奇怪的错误，当你将鼠标移离lightbox div时，lightbox 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;
}

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

---

多谢各位

伪类目标作用于id元素，而不是类：

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

尝试在CSS中将.lightbox替换为lightbox，您的HTML元素应该是

---

我问了[这里][1]重复的问题，有人指给我这个答案。因此，我更改了设置以使用ID标签。奇怪的是，它修复了div消失的问题，即使在单击视频播放器控件（即使用playhead搜索、暂停）时也是如此。但仍然不起作用的是，单击视频播放器的全屏按钮会隐藏视频，但会使其全屏显示。我想知道这是一个FF错误还是我这边的另一个错误？[1]:

#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;
}