基本上有这样的风格
.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);
}
我正在寻求支持常青和IE10 / 11,Chrome for Android(4.4),移动Safari(iOS 7),它不应该伤害其他触摸事件(滑动滚动).
它似乎按照Android和Chrome设备仿真的方式工作,非粘性变换触摸是所期望的行为.
但是,不知何故,这个密码在iOS Webkit(iOS 8,所有浏览器)上都不起作用,它没有任何接触.我很确定完全一样的方法(块元素：活动与指针事件：无加：hover)在iOS 8之前为我工作.如何解决？
它看起来像空的touchstart / touchend JS事件处理程序或者onuchstart / ontouchend属性can activate touch behaviour on iOS(不能确定,但这可能发生在我之前).这是一个已知的修复问题,还是有较少的黑客,哪些iOS版本受到影响？
解决方法
:active pseudo class matches when an element is being activated by the user”.独立的< div>元素不能被用户激活,因此不会被：active伪类匹配.
如果您在Browser Compatibility下查看：主动MDN文章,您会看到：
[1] By default,Safari Mobile does not use the :active state unless there is a
touchstartevent handler on the relevant element or on the<body>.
MDN有一个list of pseudo classes可以使用,你可能可以找到一个更适合你的情况,或添加一个touchstart事件应该在Safari的诀窍.
通过更改< div class =“hover-block”>< / div>可以使你的plnkr工作得很快.元素到< button class =“hover-block”>< / button>并改变.hover-block：active {to .hover-block：focus {.我还添加了display：block; border：0;到.hover-block.
由于显而易见的原因,您可能不想更改您的< div>到<按钮>为了让你的效果工作,但是通过使用可以被激活的元素,使用不同的伪类,或添加允许在目标浏览器中激活的事件,你应该能够实现你在移动设备上寻找的效果设备.
希望有帮助！