0

所以我无法让过渡在这里工作，悬停时可以切换图像，我已经在另一个网站上使用了这个过渡，并且在同一台机器和浏览器上使用时工作得很好但是在这个网站上我目前正在构建过渡没有它.... 这是 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");
}
4

1 回答 1

0

这对我来说很好：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-03T19:39:45.700 回答