褪色到懸停的第二張圖像

我試圖讓圖像懸停功能與淡入淡出。它適用於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

褪色到懸停的第二張圖像

回答

相關問題