基本上有这样的风格
.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
touchstart
event 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>到<按钮>为了让你的效果工作,但是通过使用可以被激活的元素,使用不同的伪类,或添加允许在目标浏览器中激活的事件,你应该能够实现你在移动设备上寻找的效果设备.
希望有帮助!