a:悬停(带有id)背景图像转换不能在firefox和ie中工作

时间:2014-03-31 16:35:58

标签: html css css3 css-transitions

我有一些标志在悬停时过渡但我总是用铬测试(是的,我搞砸了)所以我只是在ff&测试它即它不起作用(我有最新的版本)

这是我的小提琴http://jsfiddle.net/r6qZw/

这是html

<a id="facebook" href="http://facebook.com"></a>

和css

#facebook {
float: left;
height: 40px;
width: 40px;
background-image: url(http://i.imgur.com/2lAKpSi.jpg);
background-repeat: no-repeat;
background-position: center center;
-o-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-khtml-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.3s linear;
}

#facebook:hover {
background-image: url(http://i.imgur.com/L7Jmol5.jpg);
}

我知道这个解决方案很简单,但我无法做到。当我删除背景图像而只是使用颜色时,它可以工作,但使用背景图像只是停止动画。我仍然得到第二张图片,但它没有动画过渡。我也试过给一个父元素(比如着名的“ul li a”等)

有人可以帮助一个菜鸟吗?

1 个答案:

答案 0 :(得分:0)

background-image不是可转换的属性(渐变除外,Chrome不支持 - 但IE支持它!)

Chrome可以为您转换图像这一事实只是标准的扩展。如果你快速地将鼠标快速移动到其上并且反复移动它看起来有多可怕,就可以证明这一点 - 尽管如此,正常的过渡是平滑的,但是图像过渡&#34;太可怕了。