Question

所以我无法在此处转换工作，在悬停工作时切换图像，我已经使用了这个转换另一个网站，并且在同一台机器和浏览器上使用时效果很好但是在我建站的这个网站上目前转型还没有......这是HTML＆amp; 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");
}

Answer 1

这对我来说很好：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并删除了多余的属性声明。

过渡时的CSS3问题

1 个答案: