这里是 plnkr example .
基本上有这样一种风格
.hover-block {
-webkit-transition: all 1s linear;
transition: all 1s linear;
}
.hover-block:active {
pointer-events: none;
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
.hover-block:hover {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
我正在寻求支持 evergreen 和 IE10/11、Android 版 Chrome(4.4+)、Mobile Safari(iOS 7+)，它不应该伤害其他触摸事件(滑动滚动)。
它似乎在 Android 和 Chrome 设备模拟上按预期工作，触摸时的非粘性转换是理想的行为。
但不知何故，这个 plunker 在 iOS webkit(iOS 8，所有浏览器)上不起作用，它在触摸时什么也不做。我很确定完全相同的方法( block 元素，:active 和 pointer-events:none 加上 :hover)对我有用在 iOS 8 之前。如何修复？
它看起来像空 touchstart/touchend JS 事件处理程序或ontouchstart/ontouchend 属性can activate touch behaviour on iOS (不能确定，但它可能发生在我之前)。它是针对该问题的已知修复程序还是较少的 hacky 修复程序，哪些 iOS 版本受到影响？
最佳答案
在您的 html 中，而不是 <body> , 做 <body ontouchstart="">
或者在 html5 中，只是 <body ontouchstart>
关于ios - 鼠标悬停和触摸的 CSS 动画 (iOS)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30866243/