Question

我正在构建一个灯箱，当点击#lightbox并使用<a href="#lightbox">属性时，该灯箱会弹出一个名为:target的div。因此，当您单击该链接时，CSS使该框可见将为#lightbox:target {display: block}。当灯箱是#page_wrap时，我希望将CSS属性应用于:target id，但我认为我遗漏了一些东西，因为我的解决方案无效。

我希望在#page_wrap：

时将以下CSS应用于#lightbox:target

overflow: hidden

我目前使用的CSS无效。

#lightbox:target + #page_wrap {overflow: hidden}

这是我的codepen.

Answer 1

这个jQuery代码应该适合你：

$("#lightbox").click( function(){ $("#page_wrap").css("overflow","hidden"); } );

将其放在标题中：

<script>
jQuery(document).ready(function($){

$("#lightbox").click( function(){ $("#page_wrap").css("overflow","hidden"); } );

});
</script>

如果你不是在调用jQuery，那么还需要：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

在上面脚本上方的标题中。

当div被定位时，如何将CSS应用于页面包装器

1 个答案: