基本上有这样的风格
.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>到<按钮>为了让你的效果工作,但是通过使用可以被激活的元素,使用不同的伪类,或添加允许在目标浏览器中激活的事件,你应该能够实现你在移动设备上寻找的效果设备.
希望有帮助！
总结以上是内存溢出为你收集整理的鼠标悬停和触摸(iOS)的CSS动画全部内容，希望文章能够帮你解决鼠标悬停和触摸(iOS)的CSS动画所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）