:after :before 切换包装不透明度答案

【问题标题】：:after :before toggle wrapper opacity:after :before 切换包装不透明度
【发布时间】：2013-07-15 20:48:07
【问题描述】：

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

但它似乎不起作用，有人有任何想法还是不起作用？

【问题讨论】：

在哪个浏览器上不工作？
你没有兴趣使用 JavaScript 来做这件事吗？
cursor:; 尝试在此处插入一个值。并尝试#wrapper:hover:after

标签： css toggle wrapper opacity

【解决方案1】：

使用jquery：

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

确保你有一个 js 文件

【讨论】：

【解决方案2】：

试试

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

【讨论】：

是的，但不会让包装器在悬停时不可见，我希望包装器在包装器上不可见：after:hover 否则页面不会无法访问

【解决方案3】：

你的css有些不对更正一下

习惯了#wrapper:hover:after这是写

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

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

Demo

【讨论】：

修复了它的一部分，但现在当我将鼠标悬停在它上面时：after 消失但不是 #wrapper（在 firefox 中），并且互联网探索只显示：after，hover 时不透明度变化
比你可以使用的 jquery