html - :target does not work on my site

Question

我找到了很酷的 CSS 来创建灯箱。它使用 :target 来显示灯箱 div。我在代码笔中尝试过，它工作正常，但在我的网站上它没有显示任何内容。我在我的代码中找不到其他阻止它显示的内容。这是基本代码:

HTML:

<a href="#img2" class="image">
    <img src="https://d2d00szk9na1qq.cloudfront.net/Product/2c6b113d-e972-42cc-a2de-f5dcf1c82e95/Images/Large_0297791.jpg">
  </a>

  <a href="#_" class="lightbox" id="img2">
    <img src="https://d2d00szk9na1qq.cloudfront.net/Product/2c6b113d-e972-42cc-a2de-f5dcf1c82e95/Images/Large_0297791.jpg">
  </a>` 

CSS:

.lightbox {
display: none;


position: fixed;
z-index: 999;
width: 100%;
height: 100%;
text-align: center;
top: 0;
left: 0;
background: rgba(0,0,0,0.8)
}
.lightbox img {
max-width: 90%;
max-height: 80%;
margin-top: 2%;
}

.lightbox:target {
outline: none;
display: block;
}

(代码笔:http://codepen.io/anon/pen/jrBrmp)

这是我的网站:http://test.fulfeal.co.uk/how-to/提前致谢。

亚历山大

Answer 1

您的站点安装中的某些东西阻止了 URL 在点击主题标签链接时发生变化。 :target 选择器作用于 URL 中的主题标签。

您将看到是否直接导航到 http://test.fulfeal.co.uk/how-to/#img1图像按预期弹出。所以您的 CSS 没有问题，问题出在您网站上的 URL 路由上。

在 codepen 中，URL 没有变化，因为底部的演示框有自己的 iframe，并且正在使用链接进行更新。