悬停时淡入第二张图像

Question

我尝试使用图像悬停功能来处理淡入淡出。它适用于Chrome，但不适用于Firefox和IE。在Chrome中它很好用，但在Firefox和IE中它只是交换而不会褪色。

我的代码如下所示：

$("#test1").hover(
  function() {
    $(this).css("background", "url(http://xxxxxx/wp-content/themes/xxxx/images/xxxx-color.png) center no-repeat").fadeIn("slow");
  },
  function() {
    $(this).css("background", "url(http://xxxxxx/wp-content/themes/xxxx/images/xxxxxx-bw.png) center no-repeat").fadeIn("slow");
  }
);

#footerLogosStart {
  text-align: center;
  height: 100px;
  width: 240px;
  float: left;
}

#footerLogosStart a {
  margin: 0 auto;
  padding: 0 0 20px 0;
}

#test1 {
  width: 136px;
  height: 21px;
  background: url('http://xxxxxx/wp-content/themes/xxxxxx/images/xxxxxx-bw.png') center no-repeat;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="footerLogosStart">
  <a id="test1">TEST</a>
</div>

Answer 1

您可能需要添加一些css，如

#footerLogosStart a{
  display:block;
  width:100px;
  height:100px;
}

或者您可能需要先进行一些图像预加载。