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

：目标伪类在firefox中无法正常工作

1 个答案: