平滑改变背景图像，Chrome工作，但IE不

您可以通过添加另一个包含悬停图像的div并将其淡出来解决所有浏览器的这个问题。它更加一致，可以在所有浏览器中工作。你将不得不把你的内容放在另一个div中，并给它一个更高的z-index，但它基本上解决了你的问题。

你的HTML应该是这样的:

<div class="div">
    <div class="hover"></div>
    <div class="content">Content in here</div>
</div>

这里是CSS:

.div {
    background: url(https://dl.dropboxusercontent.com/u/6597309/images/button.png);
    width: 150px;
    height: 150px;
    position: relative;
}
.div > div {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
}    
.div > div.content {
    z-index: 2;
}
.div > div.hover{
    background: url(https://dl.dropboxusercontent.com/u/6597309/images/hover.png);
    opacity: 0;            
    -webkit-transition: all 0.5s ease;    
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.div:hover > div.hover {
    opacity: 1;
}

你甚至可以使用jQuery让它在旧的浏览器中工作:

$(".hover").parent().mouseover(function(event){
    $(this).find(".hover").stop().animate({"opacity": 1});
}).mouseleave(function(){
    $(this).find(".hover").stop().animate({"opacity": 0});
});

虽然当你这样做的时候，要么检查Javascript是否支持CSS3过渡，如果它支持，不要;编写脚本。在jQuery中，每一帧值都要改变，这将花费很长时间来执行此操作，而CSS试图使每次更改持续0.4秒…