divをターゲットにしているときにページラッパーにCSSを適用する方法 - javascript、html、css、css-selectors、target

と呼ばれるdivをポップアップ表示するライトボックスを作成しています #lightbox いつ <a href="#lightbox">をクリックして :target プロパティが使用されます。そのため、そのリンクをクリックするとCSSが表示され、ボックスが表示されます。 #lightbox:target {display: block}。私はCSSのプロパティをに適用しようとしています #page_wrap ライトボックスが :target しかし、私の解決策がうまくいかないので、何かが足りないと思う。

次のCSSをに適用したい #page_wrap いつ #lightbox:target：

overflow: hidden

現在のCSSが動作していません。

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

ここに私の codepen。

回答：

この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>

上記のスクリプトの上のヘッダーにあります。