CSS如何实现图片淡入淡出效果

Question

有两个div分别显示a、b两张不同图片，要求鼠标移入到某个div后平滑淡入显示图片，移出div后图片平滑淡出显示。
现在以下代码只能实现淡入，鼠标移开后就不能淡出，如何才能用CSS3做到淡出？

<style>
.a{
    height: 375px;
    width: 500px;
    opacity: 0;
}    
.a:hover{
    background-image:url(a.png);
    cursor: pointer;
    opacity: 1;
    -webkit-transition:all 1.0s ease-in-out;
    -moz-transition:all 1.0s ease-in-out;
    -o-transition:all 1.0s ease-in-out;
    -ms-transition:all 1.0s ease-in-out;
    transition:all 1.0s ease-in-out;
}
.b{
    height: 375px;
    width: 500px;
    opacity: 0;
}    
.b:hover{
    background-image:url(b.png);
    cursor: pointer;
    opacity: 1;
    -webkit-transition:all 1.0s ease-in-out;
    -moz-transition:all 1.0s ease-in-out;
    -o-transition:all 1.0s ease-in-out;
    -ms-transition:all 1.0s ease-in-out;
    transition:all 1.0s ease-in-out;
}
</style>

<div class="a"></div>
<div class="b"></div>

Answer 1

background-image transition不要写hover里

Answer 2

<style>
.a{
    height: 375px;
    width: 500px;
    opacity: 0;
    -webkit-transition:all 1.0s ease-in-out;
    -moz-transition:all 1.0s ease-in-out;
    -o-transition:all 1.0s ease-in-out;
    -ms-transition:all 1.0s ease-in-out;
    transition:all 1.0s ease-in-out;
}    
.a:hover{
    background-image:url(a.png);
    cursor: pointer;
    opacity: 1;
}
.b{
    height: 375px;
    width: 500px;
    opacity: 0;
    -webkit-transition:all 1.0s ease-in-out;
    -moz-transition:all 1.0s ease-in-out;
    -o-transition:all 1.0s ease-in-out;
    -ms-transition:all 1.0s ease-in-out;
    transition:all 1.0s ease-in-out;
}    
.b:hover{
    background-image:url(b.png);
    cursor: pointer;
    opacity: 1;
}
</style>

<div class="a"></div>
<div class="b"></div>

transition就是css3属性，如果你设置在hover上，那只有鼠标hover的时候才会加transition属性，所以划入的时候会有动画，当划出的时候不在hover状态，当然也就没有transition属性，也就没了动画，还有，background-image属性也写在a标签下

Answer 3

将transition放到.a上 不要放到.a:hover上
放到hover只鼠标移上去才过渡动画

Answer 4

transition 不能写在伪类里面。
根据你上面的代码正确的写法:
a {
…
transition:…;
…
}
a:hover {
…
}

Answer 5

.b {

height: 375px;
width: 500px;
opacity: 0;
background-image:url(b.png);
transition:all 1.0s ease-in-out;

}

.b:hover {

opacity: 1;

}

Answer 6

jquery的fadeIn()和fadeOut()这个可以

Answer 7

css的hover相当于js的移入移除的效果，楼上已经说了用jq你也可以用jq中的hover 实现的效果和你想要的差不对