javascript - CSS 颜色叠加悬停

Question

我实际上是在尝试获得相反的效果:http://jsfiddle.net/4fgnd/我希望我的图像有一个带有一定透明度的黑色覆盖层，当我用鼠标悬停时，我希望覆盖层消失。

有什么想法吗？不要真的关心它是纯 css 还是 css 和 js 的组合。

谢谢

<div class="image">
    <img src="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg" alt="" />
</div>

.image {
  position:relative;
   width:400px;
   height:400px;
}
.image img {
   width:100%;
   vertical-align:top;
}
.image:after {
   content:'\A';
   position:absolute;
   width:100%; height:100%;
   top:0; left:0;
   background:rgba(0,0,0,0.4);
   opacity:0;
   transition: all 0.5s;
   -webkit-transition: all 0.5s;
}
.image:hover:after {
    opacity:1;
}

Answer 1

给你，简单地反转css http://jsfiddle.net/4fgnd/1226/

.image:before {
    content:'\A';
    position:absolute;
    width:100%; height:100%;
    top:0; left:0;
    background:rgba(0,0,0,0.6);
    opacity:0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}
.image:before {
    opacity:1;
}
.image:hover:before {
    opacity:0;
}