Html CSS3问题与过渡

所以我很难在这里进行转换，在hover上切换图像，我在另一个网站上使用了这个转换，在同一台机器和浏览器上使用时效果很好，但是在这个网站上，我目前正在构建的转换没有它。。。。下面是HTML和CSS

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

打声招呼！
这里有一些描述文字
a、 睾丸镜
{
背景：url（“../images/testicon.png”）；
宽度：140px；
高度：140像素；
边界半径：7px 7px 7px 7px；
显示：内联块；
}
a、 测试控制器：悬停，a。测试控制器：聚焦，a。测试控制器：激活
{
宽度：140px；
高度：140像素；
边界半径：7px 7px 7px 7px；
显示：内联块；
-webkit转换：背景。3s线性0s；
-moz转换：背景。3s线性0s；
背景：url（“../images/testicon2.png”）；
}

这对我来说很好：

---

注意：我简化了CSS并去掉了冗余的属性声明

它工作得很好，你清理浏览器缓存了吗>？你知道，这很有趣。它有时在JSFIDLE上“起作用”，但并非总是如此。我点击了我刚刚发布的链接，但它不起作用。但我刷新了那个页面，然后它就刷新了——某种浏览器/缓存问题，我想这显然是某种笨拙的浏览器缓存。我一直在清除历史记录和cookies，但问题仍然存在。它在其他机器上工作。谢谢大家！您正在为占位符图像使用相同的URL。可以缓存这些图像，这样它可能会认为它们都是同一个图像，并且不会发生转换，因为它看不到更改。此外，第一次将鼠标悬停在图像上时，浏览器将请求悬停图像，因此在加载图像时，您会看到“闪烁”，但是后续的悬停/模糊事件应该会导致转换正常工作。

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