호버 (hover)의 두 번째 이미지로 희미 해집니다.

페이딩으로 작동하는 이미지 호버 기능을 얻으려고합니다. Chrome에서는 작동하지만 Firefox 및 IE에서는 작동하지 않습니다. 크롬에서는 멋지게 색이 바래지 만, 파이어 폭스와 IE에서는 색이 바래지 않고 바뀝니다.호버 (hover)의 두 번째 이미지로 희미 해집니다.

내 코드는 다음과 같습니다 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

중복 질문 같습니다. http://stackoverflow.com/questions/2983957/animate-background-image-change-with-jquery –

당신은

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

같은 일부 CSS에 추가해야 할 수도 있습니다 또는 먼저 사전로드 일부 이미지를 할 필요가 있습니다.

출처

2012-07-09 06:36:56 fedmich

호버 (hover)의 두 번째 이미지로 희미 해집니다.

답변

관련 문제