鼠标悬停和触摸的CSS动画(iOS)

Question

鼠标悬停和触摸的CSS动画(iOS)

基本上有这样的风格

.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);
}

Run Code Online (Sandbox Code Playgroud)

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

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

但不知怎的,这个plunker在iOS webkit(iOS 8,所有浏览器)上都不起作用,它什么都不做.我非常确定在iOS 8中:active使用完全相同的方法(块元素,pointer-events: none加号:hover)对我有用.怎么修好？

看起来像空的 touchstart/touchend JS事件处理程序或ontouchstart/ ontouchend属性可以激活iOS上的触摸行为(不能确定,但它可能发生在我之前).它是一个已知的问题解决方案,还是有较少的hacky,iOS版本会受到影响？

Answer 1

Ben*_*lum 3

因此，您遇到的问题是：“:active当用户激活元素时，伪类会匹配”。独立<div>元素无法由用户激活，因此不会与:active伪类匹配。

如果您查看MDN 文章中的浏览器兼容性，:active您会看到：

[1] 默认情况下，Safari Mobile 不使用 :active 状态，除非touchstart相关元素或<body>.

MDN 有一个可以使用的伪类列表，您也许能够找到一个更适合您情况的伪类，或者touchstart在 Safari 中添加一个事件应该可以解决问题。

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

出于显而易见的原因，您可能不想将您更改<div>为 a<button>以使效果发挥作用，但是通过使用可以激活的元素、使用不同的伪类或添加允许在目标浏览器中激活的事件，您可以应该能够在移动设备上达到您想要的效果。

希望有帮助！

归档时间：	10 年，11 月前
查看次数：	4380 次
最近记录：	10 年，10 月前