移动端active伪类无效的解决方法

active伪类在PC端的作用为鼠标点击到放开时给元素添加样式用,呈现目标被点击的激活状态。
写法也很简单

/** 将a标签点击时的背景色改为红色 **/
a:active{
    background-color: red;
}

但是直接在移动端这么写会发现没有效果。查找一番,在mozilla开发社区找到了结果。
<code>[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>.</code>
需要在按钮元素或body/html上绑定一个touchstart事件才能激活:active状态。

document.body.addEventListener('touchstart', function (){}); //...空函数即可

将上述事件监听代码加上后,Safari Mobile上就可以看到按钮按下后的切换效果了。
参考文章:https://developer.mozilla.org/en-US/docs/Web/CSS/:active

原文:http://blog.csdn.net/freshlover/article/details/43735273

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

友情链接更多精彩内容