css - :after :before toggle wrapper opacity -

so im trying make button on site when hovered make content of page have 0 opacity. code

#wrapper{ box-shadow:0 0 15px rgba(0,0,0,1); position:relative; width:960px; height:auto; margin:0 auto; transition:opacity 1s;} #wrapper:after{ width:100px; height:100px; cursor:; background:rgba(0,0,0,1); content:''; display:block; left:-200px; z-index:10000; position:absolute; top:-50px; border-radius:150px;} #wrapper :after :hover{ opacity:0;} 

but wont seem work, have ideas or not work?

use jquery:

$('.button-class').hover(function(){     $('body').css({'opacity' : '0'}); }, function(){     $('body').not(this).css({'opacity' : '1'}); }); 

make sure have js file though