动画CSS3在此悬停图像上不起作用

Question

我有一张图像，它的背景在悬停时发生了变化，我想把悬停添加到它上面。

这是我想添加的内容：

  -webkit-transition: all 1s ease-in-out;

它是在线版本：http://jsfiddle.net/jmXdh/2/

Answer 1

DEMO

这就是您正在寻找的解决方案！

HTML CHANGES
<a href="/">
<img class="imghover" src="http://i42.tinypic.com/2v9zuc1.jpg"/>
<img class="img" src="http://i40.tinypic.com/i3s4dc.png"/>
</a>
CSS IMPROVEMENTS
.img{
    z-index:1;
    margin-left: -190px;
    margin-bottom:5px;
    opacity:0;
    -webkit-transition:opacity 0.5s;
}
.img:hover{
    opacity:1;
}
.imghover{
    z-index:-100;
}

Answer 2

某些CSS属性无法设置动画，包括background-image。看见https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties