html - 如何将 "lightbox"一个不可点击的 div 消失？ [没有JS]

Question

我希望我的乐谱的 div 在点击该链接时成为一个灯箱:

<a href="#test">TEST</a>

但我们不想通过点击 div 使其消失，只是仅在黑色背景上!

这是我的尝试:

<a id="test" href="#">
  <div id="details">
    many scores ! : <br>
    test n°1 : 16/20<br>
    test n°2 : 11/20<br>
    test n°3 : 17/20<br>
    test n°4 : 14/20<br>
    test n°5 : 15/20<br>
  </div>
</a>

但是正如您在这个 fiddle 中看到的那样，我们可以单击灯箱以使其消失...:http://jsfiddle.net/apr4Ln3j/

顺便说一下，没有 JS ... 遗憾的是我不允许使用 --'

Answer 1

在您提供的示例中，在打开时单击背景或图像框将其关闭。

但是，您可以尝试摆弄pointer-events property

JSFiddle

我已经修改了您的 Fiddle，使用此属性使框可点击，背景不可点击。我知道您想要相反的结果，但也许现在您可以自己到达那里 - 我只是指导一条可能的路径。