图像上的Webkit转换未在移动设备上显示

此转换在桌面上可以正常工作，但在移动设备上，将“悬停”事件解释为移动设备上的图标，只是使图像消失而不是替换新图像。所有其他转换都有效。图像上的Webkit转换未在移动设备上显示

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

来源

2012-12-24 Alex Borsody

你的意思是iOS的Safari浏览器？或Android上的Chrome /浏览器？或两者？ – 2012-12-24 19:05:53

只在android –

上测试过，是''hover'上的'-transition'，这里只是一个输入错误，或者是现场代码呢？也请确保文件存在并命名正确.. –

我没有自己的Android手机，只有iOS设备，但我知道的是，过渡性质具有非常分散的支持，到目前为止，当它涉及到的图像。与Firefox和Internet Explorer都支持转换代码一样，但不支持转换代码，但不能用于缓存图像。我与另一个人在回答与过渡财产有关的背景图片不起作用的类似问题时，我们都得出这样的结论：它在很多浏览器中都不起作用。哦，我只是找了它，这个帖子是由你来的！ css3 transform on image hover in firefox。那个帖子基本上回答你的问题。 :)

它可能不会修复它（但它是很好的尝试，反正），这是毫无意义的重复悬停过渡性质...

来源

2012-12-24 19:24:31

很高兴知道我的答案有帮助！ – 2012-12-24 22:32:45

图像上的Webkit转换未在移动设备上显示

回答

相关问题