首页 文章

鼠标悬停和触摸的CSS动画（iOS）

提问于
浏览 次
11

这是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);
}

我正在寻求支持常青和IE10 / 11，Chrome for Android（4.4），移动Safari（iOS 7），它不应该伤害其他触摸事件（滑动滚动） .

它似乎按照预期在Android和Chrome设备上进行模拟，触摸时非粘性变换是理想的行为 .

但不知何故，这个吸虫并不确定在iOS 8之前完全相同的方法（块元素， :active 与 pointer-events: none 加上 :hover ）对我有用 . 怎么修好？

它看起来像空的touchstart / touchend JS事件处理程序或 ontouchstart / ontouchend 属性can activate touch behaviour on iOS（不能确定，但它可能发生在我之前） . 它是一个已知的问题解决方案，还是有较少的hacky，iOS版本会受到影响？

ios css css3 mobile-safari

2 回答

  • 3

    所以你遇到的问题是：“:active pseudo class matches when an element is being activated by the user” . 用户无法激活独立的 <div> 元素，因此 :active 伪类不会匹配 .

    如果您在 :active MDN文章中查看Browser Compatibility，您会看到：

    [1]默认情况下，Safari Mobile不使用：active状态，除非相关元素或<body>上有touchstart事件处理程序 .

    MDN有list of pseudo classes可以使用，你可以找到一个更适合你的情况或添加 touchstart 事件应该在Safari中的技巧 .

    通过将 <div class="hover-block"></div> 元素更改为 <button class="hover-block"></button> 并将 .hover-block:active { 更改为 .hover-block:focus { ，我能够让您的plnkr工作得非常快 . 我还将 display: block; border: 0; 添加到 .hover-block .

    出于显而易见的原因，您可能不希望将 <div> 更改为 <button> 以使您的效果起作用，而是使用可以激活的元素，使用不同的伪类，或添加允许在目标浏览器中激活的事件，你应该能够达到你在移动设备上寻找的效果 .

    希望有所帮助！

    回复于
  • 3

    在你的html中，而不是 <body> ，做 <body ontouchstart=""> 或在html5中，只需 <body ontouchstart>

    回复于

相关问题