更改背景图像的toggleClass上的jQuery和CSS转换

Question

我有一个带背景图片的div。
我使用此代码添加的类将另一个图像设置为背景。

$(".imageclass").hover(function() {
   $(this).toggleClass( "imageclass2" );
});

当切换类时，我尝试平滑过渡，但是这样：

-webkit-transition:  0.4s ease;
-moz-transition:  0.4s ease;
-o-transition: 0.4s ease;
transition:  0.4s ease;

仅适用于Chrome，您可以在此处看到

https://jsfiddle.net/ng8d2cqt/1/

Answer 1

您无法转换背景图片。我很惊讶铬实际上是在图像之间交叉淡入淡出。

我建议为每张图片定义两个容器，然后将它们叠放在一起。 “活动”图像将其不透明度设置为0，并在悬停时转换为1.