Question

我找到了很酷的CSS来创建灯箱。它使用：target来显示lightbox 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;
}

（Codepen：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没有任何问题，问题在于您网站上的网址路由。

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

Answer 2

您的网站url已被路由。解决问题的两种方法

您正在为自己的网站使用wordpress框架，因此请转到wordpress内容管理面板并更改url类型。

或

在您网站的末尾添加以下代码。

<script> $(function(){ $(".image").on("click",function(){ var image = $(this).attr("href"); $(image).show(); }); }); </script>

：目标在我的网站上不起作用

2 个答案: