CSS3 전환 관련 문제

여기에서 작동하도록 전환하는 데 문제가 있습니다. 마우스를 올려 놓으면 이미지가 전환됩니다.이 전환을 다른 사이트에 사용 했으므로 동일한 컴퓨터와 브라우저에서 사용하면 문제가 없습니다. 사이트 내가 여기에 .... 전환이 그것을 가지고하지 않습니다 현재 건물입니다은 HTML & CSS입니다CSS3 전환 관련 문제

<div class="grid_4"> 
<h3 class="foot"> 
Say Hello! 
</h3> 
<h3 class="descripfoot"> 
<div class="grid_2"> 
<a class="testicon" title="flickr Link" align="left" href="http://www.flickr.com"></a> 
</div> 
    some description text goes hereeeee 

</h3> 
</div> 


a.testicon 
{ 
    background: url("../images/testicon.png"); 
    width:140px; 
    height: 140px; 
    border-radius: 7px 7px 7px 7px; 
    display: inline-block; 

} 

a.testicon:hover,a.testicon:focus,a.testicon:active 
{ 
width:140px; 
height: 140px; 
    border-radius: 7px 7px 7px 7px; 
    display: inline-block; 
    -webkit-transition: background .3s linear 0s; 
-moz-transition: background .3s linear 0s; 
background: url("../images/testicon2.png"); 
}

출처

2012-10-03 YoungGuy

완벽하게 작동합니다. 브라우저 캐시를 정리 했습니까?>? –

아시다시피 재미 있습니다. 때때로 jsfiddle에서 "작동"하지만 항상 http://jsfiddle.net/demchak_alex/LWsVt/가 아닙니다. 방금 게시 한 링크를 클릭했는데 작동하지 않았습니다. 그러나 나는 그 페이지를 새로 고쳤다. 내가 생각하기에 브라우저/캐시 문제 일까? – Xhynk

명백하게 어색한 브라우저 캐싱 일종. 나는 역사와 쿠키를 지우지 만 문제는 여전히 존재한다. 그것은 다른 기계에서 작동합니다. 고마워요! – YoungGuy

이 나를 위해 잘 작동 : http://jsfiddle.net/LWsVt/2/

a.testicon 
{ 
    background: url(http://lorempixel.com/200/200) center center no-repeat; 
    background-size: 200px 200px; 
    width:140px; 
    height: 140px; 
    border-radius: 7px 7px 7px 7px; 
    display: inline-block; 
    -webkit-transition: background .3s linear 0s; /* obviously declare all vendor prefixes here */ 
} 

a.testicon:hover,a.testicon:focus,a.testicon:active 
{ 
    background-image: url(http://lorempixel.com/400/400); 
    outline:none; 
}

참고 나는 CSS를 단순화하고 없앴다고 중복 속성 선언의 ns.

출처

2012-10-03 19:39:45 Shmiddty

CSS3 전환 관련 문제

답변

관련 문제