褪色到悬停的第二张图像

我试图让图像悬停功能与淡入淡出。它适用于Chrome，但不适用于Firefox和IE。在Chrome中它变得很好，但是在Firefox和IE中它只是交换而不会退色。褪色到悬停的第二张图像

我的代码如下所示： jQuery的

$("#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"); 
    } 
);

CSS

#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; 
    }

HTML

<div id="footerLogosStart"> 
      <a id="test1"></a> 
</div>

来源

2012-07-09 JohnSmith

你会提到jQuery，firefox和IE的版本吗？ – diEcho 2012-07-09 06:35:11

看起来像一个重复的问题..这可能会帮助你： http://stackoverflow.com/questions/2983957/animate-background-image-change-with-jquery – 2012-07-09 06:41:26

您可能需要在一些CSS添加像

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

，或者你可能需要做一些像第一预加载。

来源

2012-07-09 06:36:56 fedmich

褪色到悬停的第二张图像

回答

相关问题