:活动伪类不能在移动Safari浏览器中工作

在iPhone / iPad / iPod上的Webkit中,当点击元素时,不会触发为<a>标记指定样式:激活的伪类。 我怎样才能触发? 示例代码:

 <style> a:active { background-color: red; } </style> <!-- snip --> <a href="#">Click me</a> 
 <body ontouchstart=""> ... </body> 

只应用一次,而不是每个button元素似乎修复页面上的所有button。 或者,你可以使用这个小JS库“ Fastclick ”。 它加快了触摸设备上的点击事件,并照顾到这个问题。

在<a>标签中添加ontouchstart的事件处理程序。 这导致CSS奇迹般地工作。

 <a ontouchstart="">Click me</a> 

正如其他答案所述,iOS Safari不会触发:active pesudo-class,除非触摸事件附加到元素上,但到目前为止,这种行为是“神奇的”。 我在Safari Developer Library上遇到了这个小问题,解释了它(重点是我):

您还可以将-webkit-tap-highlight-color CSS属性与设置触摸事件一起使用,以将buttonconfiguration为与桌面类似。 在iOS上,鼠标事件发送速度非常快,从而不会收到closures或活动状态。 因此,只有在HTML元素上设置了触摸事件时,才会触发:active伪状态 – 例如,如果在元素上设置了ontouchstart,则如下所示:

 <button class="action" ontouchstart="" style="-webkit-tap-highlight-color: rgba(0,0,0,0);"> Testing Touch on iOS </button> 

现在,当iOS上轻按button时,button将变为指定的颜色,而不会出现周围的透明灰色。

换句话说,设置一个ontouchstart事件(即使它是空的)明确地告诉浏览器对触摸事件作出反应。

在我看来,这是有缺陷的行为,可能要追溯到“移动”网页基本不存在的时候(查看链接页面上的截图以了解我的意思),而且一切都是以鼠标为导向的。 有趣的是,其他更新的移动浏览器,比如Android,在触摸屏上显示':active'伪状态就好了,没有像iOS所需要的任何窍门。

(注意:如果你想在iOS上使用你自己的自定义样式,你也可以通过使用-webkit-tap-highlight-color CSS来禁用iOS使用的默认灰色半透明框来代替:active伪状态财产,如上面相同的链接页面所解释的。)


经过一番实验,在<body>元素上设置一个ontouchstart事件的预期解决scheme,那么所有的触摸事件都会冒泡到不了。 如果元素在页面加载时在视口中可见,那么它可以正常工作,但向下滚动并轻击视口外的元素不会触发:active伪状态。 所以,而不是

 <!DOCTYPE html> <html><body ontouchstart></body></html> 

将事件附加到所有元素,而不是依赖于冒泡到正文的事件(使用jQuery):

 $('body *').on('touchstart', function (){}); 

但是,我不知道这个性能影响,所以要小心。


编辑:这个解决scheme有一个严重的缺陷:即使触摸一个元素,而滚动页面将激活:active伪状态。 敏感度太强。 Android通过在显示状态之前引入一个非常小的延迟来解决这个问题,如果页面被滚动,取消它。 鉴于此,我build议只在选定的元素上使用它。 在我的情况下,我正在开发一个Web应用程序,在这个领域中使用,基本上是一个button的列表来导航页面并提交操作。 因为在某些情况下,整个页面是非常多的button,这不适合我。 但是,您可以将:hover伪状态设置为填充此状态。 禁用默认的灰色框后,这完美的作品。

你是使用所有的伪类还是只使用一个? 如果您至less使用了两个,请确保它们按正确的顺序排列,否则它们都会中断:

 a:link a:visited a:hover a:active 

..以该顺序。 此外,如果您只是使用:主动,添加:链接,即使你不是样式。

 //hover for ios -webkit-tap-highlight-color: #ccc; 

这适用于我,添加到你想突出显示的元素的CSS

截至2016年12月8日,在Safari 10(iPhone 5s)上,我接受的答案( <body ontouchstart="">...</body> )不适用于我:只适用于那些可见的元素页面加载。

但是,增加:

 <script type='application/javascript'> document.addEventListener("touchstart", function() {}, false); </script> 

head按我想要的方式工作,缺点是在滚动期间所有触摸事件都会触发被触摸元素上的:active伪状态。 (如果这对您来说是个问题,您可以考虑使用FighterJet :hover解决方法。)

这适用于我:

 document.addEventListener("touchstart", function() {},false); 

注意:如果你这样做,它也值得移除默认的龙头高亮颜色手机Safari使用以下CSS规则应用。

 html { -webkit-tap-highlight-color: rgba(0,0,0,0); } 

我已经发布了一个应该为你解决这个问题的工具。

表面上问题看起来很简单,但实际上,触摸和点击行为需要进行相当广泛的定制,包括超时function以及诸如“当您滚动链接列表时会发生什么事情”或“当您按下链接时会发生什么事情”将鼠标/手指远离活动区域“

这应该立即解决: https : //www.npmjs.com/package/active-touch

您需要将您的:主动样式分配给.active类或select您自己的类名称。 默认情况下,这个脚本可以和所有的链接元素一起工作,但是你可以用你自己的select器来覆盖它。

诚实,有用的反馈和贡献非常感谢!

没有100%涉及到这个问题,但你可以使用CSS兄弟破解来实现这一点

HTML

 <input tabindex="0" type="checkbox" id="145"/> <label for="145"> info</label> <span> sea</span> 

SCSS

 input { &:checked + label { background-color: red; } } 

如果你想使用纯html / css工具提示

 span { display: none; } input { &:checked ~ span { display: block; } } 
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <style> a{color: red;} a:hover{color: blue;} </style> </head> <body> <div class="main" role="main"> <a href="#">Hover</a> </div> </body> </html>