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

它显然是一种尴尬的浏览器缓存。我一直清除历史记录和Cookie，但问题仍然存在。它适用于其他机器。多谢你们！ – 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和整肃冗余财产申报纳秒。

来源

2012-10-03 19:39:45 Shmiddty

CSS3与转换问题

回答

相关问题