1

这种过渡在桌面上运行良好，但在移动设备上，“悬停”事件被解释为移动设备上的点击，只会使图像消失而不是替换新图像。所有其他转换都有效。

.mark.studio{
   background: url(../images/studio_icon.png) no-repeat;
   -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out; 
   transition: all .3s ease-in-out; 
   height: 50px;
   width: 50px;
   z-index:103 !important;
}

.mark.studio:hover{
   -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out; 
  -transition: all .3s ease-in-out; 
   background: url(../images/studio_icon-hover.png) no-repeat;
}
4

1 回答 1

2

我没有 Android 手机，只有 iOS 设备，但我知道到目前为止，当涉及到图像时，transition 属性的支持非常分散。像 Firefox 和 Internet Explorer 一样，都支持过渡代码，但在用于缓入和缓出图像时不支持。我和另一个人一起回答了一个类似的问题，即背景图像不起作用的过渡属性，我们都得出结论，它在很多浏览器中都不起作用。哦，我刚找了，帖子是你发的！Firefox 中图像悬停时的 css3 变换。那篇文章基本上回答了你的问题。:)

它可能无法修复它（但无论如何尝试它都很好），在悬停时重复转换属性是没有意义的......

于 2012-12-24T19:24:31.360 回答