：active伪类常用于设定点击状态下或其他被激活状态下一个链接的样式。最常用于锚点<a href="#">这种情况，一般主流浏览器下也支持其他元素，如button等。在多按键的鼠标系统中，：active只适用于主按键，目前的大部分情况都是左键即主键。
该伪类下定义的CSS样式只在按下鼠标按钮与释放鼠标按钮之间的短暂瞬间被触发显示。使用键盘的tab键也可以触发:active状态。

说到：active伪类就不得不提到:link,:visited,:hover,:active这个四个，最常用的是用于a链接，设定鼠标交互时不同的链接颜色。如下示例：

  1. a:link { /* Essentially means a[href], or that the link actually goes somewhere */
  2. color: blue;
  3. }
  4. a:visited {
  5. color: purple;
  6. }
  7. a:hover {
  8. color: green;
  9. }
  10. a:active {
  11. color: red;
  12. }

上述代码中，将 :visited放到最后，则会导致以下结果：若链接已经被访问过，a:visited会覆盖:active和:hover的样式声明，链接将总是呈现为紫色，无论鼠标悬停还是按下激活，链接都将保持为紫色。

基于此原因，上述代码必须按照顺序定义，一般称为LVHA-order: :link — :visited — :hover — :active，为方便记忆，可记为“LOVE HATE”

L :link
O
V :visited
E

H :hover
A :active
T
E

浏览器兼容性：

Chrome Safari Firefox Opera IE Android iOS
Yep 2.0.4+ any 4+ 4+ TBD TBD

项目中是移动端页面要做一个按钮状态切换的效果，在PC上测试没有问题，到了手机端发现安卓的正常，iOS则没有效果。

源码：

  1. .slotbtn{
  2. width: 5.5rem;
  3. height: 4rem;
  4. background: url(../images/sbtn.png) no-repeat 0 0;
  5. -webkit-background-size: 100% auto;
  6. background-size: 100% auto;
  7. overflow: hidden;
  8. cursor: pointer;
  9. -webkit-tap-highlight-color:transparent;
  10. -webkit-user-select:none;
  11. }
  12. .slotbtn:active, .slotbtn:focus{
  13. background-image: url(../images/sbtn_active.png);
  14. }

html代码：

  1. <div class="row tc row-sbtn"><span id="slotbtn" class="slotbtn"></span></div>

页面截图：

虽然知道jQuery Mobile框架中常会用操作class的方法来进行按钮状态切换，不过觉得非常繁琐，性能不好。而且我们有:active的天然定制属性，为何不用而舍近求远呢？？

经过一番查找，之后在mozilla开发社区找到了：active不起作用的答案：

[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>.

看来在iOS系统的移动设备中，需要在按钮元素或body/html上绑定一个touchstart事件才能激活:active状态。

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

将上述事件监听代码加上后，Safari Mobile上就可以看到按钮按下后的切换效果了。

参考文章：https://developer.mozilla.org/en-US/docs/Web/CSS/:active

移动端:active伪类无效的解决方法的更多相关文章

  1. 移动端bug~~移动端:active伪类无效的解决方法【移动端 ：active样式无效】

    移动端:active伪类无效的解决方法[移动端 :active样式无效]2016-09-26  15:46:50 问题: 移动端开发的时候实现按钮的点击样式变化,但是在iphone[safiri Mo ...

  2. 解决scroll在ios上卡顿问题和兼容ios不支持:active伪类情况

    //有时候因为滚动层级元素过多会产生卡顿,特别在ios上十分明显,如果不想更换其他实现方式,可以加:-webkit-overflow-scrolling: touch; 开启硬件加速: 兼容ios不支 ...

  3. iOS Web开发激活css的active伪类

    最近在做一个资讯客户端,用到UIWebview展示一些网页内容,本来想做一个简单的按压效果,发现在css中设置active属性一直不管用. 查阅了一下资料,今天发现,要让css active伪类生效, ...

  4. css :active伪类的理解

    /*active伪类为点击鼠标按下去还没松开鼠标的那一瞬间的事件*/

  5. QWidget子窗口中setStyleSheet无效，解决方法

    继承 QWidget setStyleSheet无效,解决方法. 发现 继承自QWidget的自定义类 ,使用setStyleSheet无效, 如果删除头文件中的 Q_OBJECT,setStyleS ...

  6. WPF Binding ElementName方式无效的解决方法--x:Reference绑定

    原文:WPF Binding ElementName方式无效的解决方法--x:Reference绑定 需求: 背景:Grid的有一个TextBlock name:T1和一个ListBox,ListBo ...

  7. 设置height:100%无效的解决方法

    设置height:100%无效的解决方法 刚接触网页排版的新手,常出现这种情况:设置table和div的高height="100%"无效,使用CSS来设置height:" ...

  8. WPF：指定的命名连接在配置中找不到、非计划用于 EntityClient 提供程序或者无效的解决方法

    文/嶽永鹏 WPF 数据绑定中绑定到ENTITY,如果把数据文件做成一个类库,在UI文件中去应用它,可能遇到下面这种情况. 指定的命名连接在配置中找不到.非计划用于 EntityClient 提供程序 ...

  9. js中style.display=""无效的解决方法

    本文实例讲述了js中style.display=""无效的解决方法.分享给大家供大家参考.具体解决方法如下: 一.问题描述: 在js中我们有时想动态的控制一个div显示或隐藏或更多 ...

随机推荐

  1. shell初级-----更多结构化命令

    for命令 bash shell提供了for命令,允许你创建一个遍历一系列的循环. for var in list do commands done 1.读取列表中的值 for命令最基本的用法就是遍历 ...

  2. RXJS组件间超越父子关系的相互通信

    RXJS组件间超越父子关系的相互通信 用到这个的需求是这样的: 组件A有数据变化,将变化的数据流通知组件B接收这个数据流并做相应的变化 实例化RXJS的subject对象 import { Injec ...

  3. Mybatis：resultMap的使用总结(转自https://www.cnblogs.com/kenhome/p/7764398.html)

    resultMap是Mybatis最强大的元素,它可以将查询到的复杂数据(比如查询到几个表中数据)映射到一个结果集当中. resultMap包含的元素: <!--column不做限制,可以为任意 ...

  4. [HNOI2010] 平面图判定 planar

    标签:二分图判定.题解: 首先可以把题目中给你的那个环给画出来,这样就可以发现对于任意一个图来说,如果两条边要相交,就不能让他们相交,那么这两条边就要一条在里面一条在外面,如果把环画成一条链,那么就是 ...

  5. [Xcode 实际操作]一、博主领进门-(8)应用代理文件(AppDelegate.swift)详解

    目录:[Swift]Xcode实际操作 本文将演示使用iOS模拟器,演示程序的生命周期. 在项目导航区,打开应用代理文件[AppDelegate.swift] 应用代理文件时系统运行本应用的委托,里面 ...

  6. C# 正则表达式输出查询结果

                //正则 第一种方法             Regex regex = new Regex(@"\d{0,}\.\d{0,}\,\d{0,}\.\d{0,}&quo ...

  7. Android Activity生命周期（转）

    转自 http://blog.csdn.net/android_tutor/article/details/5772285

  8. iPhone X的适配问题

    //屏幕宽高 #define SCREEN_WIDTH [UIScreen mainScreen].bounds.size.width #define SCREEN_HEIGHT [UIScreen ...

  9. 094 Binary Tree Inorder Traversal 中序遍历二叉树

    给定一个二叉树,返回其中序遍历.例如:给定二叉树 [1,null,2,3],   1    \     2    /   3返回 [1,3,2].说明: 递归算法很简单,你可以通过迭代算法完成吗?详见 ...

  10. Codeforces Beta Round #12 (Div 2 Only) D. Ball 树状数组查询后缀、最值

    http://codeforces.com/problemset/problem/12/D 这里的BIT查询,指的是查询[1, R]或者[R, maxn]之间的最值,这样就够用了. 设三个权值分别是b ...