: after: before toggle wrapper opacity

Question

поэтому я пытаюсь сделать кнопку на моем сайте, чтобы при наведении указателя на страницу было 0 непрозрачности. это мой код

#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;} 

но он, похоже, не работает, у кого есть идеи или он просто не работает?

Answer 1

Использование JQuery:

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

Убедитесь, что вы есть JS файл, хотя

Answer 2

Попробуйте

#wrapper 
{ 
opacity:1; 
filter:alpha(opacity=100); /* For IE8 and earlier */ 
} 
#wrapper:hover 
{ 
opacity:0; 
filter:alpha(opacity=0); /* For IE8 and earlier */ 
} 

Answer 3

Ваш CSS некоторые неправильно правильно к этому

Используется для этого#wrapper:hover:after Это пишут

Не это#wrapper :after :hover Это неправильно

#wrapper:hover:after { 
    background:rgba(0,0,0,0); 
} 

Demo