:after:toggle包装器不透明度之前

时间:2013-07-15 12:31:27

标签: css toggle wrapper opacity

所以我试图在我的网站上制作一个按钮,当悬停时会使页面的内容具有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;}

但似乎没有用,任何人都有任何想法,或者它会不起作用?

3 个答案:

答案 0 :(得分:0)

尝试

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

答案 1 :(得分:0)

你的css有些错误正确到这个

用于此 #wrapper:hover:after这是写

不是这个 #wrapper :after :hover这是错误的

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

<强> Demo

答案 2 :(得分:0)

使用jquery:

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

确保你有一个js文件,但