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

Answer 2

在css中切换不透明度状态：）

此处的工作示例http://jsfiddle.net/4fgnd/1225/

.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.6);
    opacity:1;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}
.image:hover:after {
    opacity:0;
}

CSS颜色叠加悬停

2 个答案: