悬停时淡入第二张图像

Posted 2023-05-08

【中文标题】悬停时淡入第二张图像

【英文标题】：fade to second image on hover

【发布时间】：2012-07-08 13:21:59

【问题描述】：

我尝试让图像悬停功能与褪色一起使用。它适用于 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>

【问题讨论】：

你会提到jQuery、firefox和IE的版本吗？

看起来像一个重复的问题。这可能对你有帮助：***.com/questions/2983957/…

【参考方案1】：

你可能需要添加一些类似的css

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

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