：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. E20190404-hm

    prepend vt. 预先考虑,预先计划,预谋;

  2. 阿里云的opensearch

    官方文档:https://help.aliyun.com/document_detail/29104.html?spm=a2c4g.11186623.6.544.5215187be2TnnD

  3. 三星Gear VR与Oculus Rift DK2全方位比拼

    网易数码1月6日消息,Oculus Rift DK2并不是面向消费者的产品,而三星Gear VR则进入了大众市场.虽然二者有点不同,但还是值得对比一番,看看Gear VR相比当下虚拟现实领域佼佼者Oc ...

  4. webpack 中导入 vue 和普通网页使用 vue 的区别（四）

    一:在普通网页中使用 vue 使用 script 标签,引入 vue 包 在 ndex 页面中,创建一个 id 为 App 的 div 容器 通过 new Vue 得到一个 vue 实例 二:在 we ...

  5. PostgreSQL-5-条件过滤

    基本语法 SELECT column1, column2, columnN FROM table_name WHERE [search_condition] 操作符 =等于:<>不等于:! ...

  6. laravel-admin 自定义导出表单

    官方导出文档 laravel-admin自带的导出excel会导出与此模型关联的其他数据.所以参考官方文档调整代码 文章表:id,title,user_id 用户表:id,username //文章模 ...

  7. NOIP前计划

    距离NOIp还有13天 距离继续学/退役还有13天 是时候列一波计划了 1. 要学的东西 cdq分治(突然发现cdq分治不太行,而且说不定可以用来代替想不出来的数据结构题) 主席树(写的太少啦,不熟练 ...

  8. Codeforces Round #533(Div. 2) C.Ayoub and Lost Array

    链接:https://codeforces.com/contest/1105/problem/C 题意: 给n,l,r. 一个n长的数组每个位置可以填区间l-r的值. 有多少种填法,使得数组每个位置相 ...

  9. 541 Reverse String II 反转字符串 II

    给定一个字符串和一个整数 k,你需要对从字符串开头算起的每个 2k 个字符的前k个字符进行反转.如果剩余少于 k 个字符,则将剩余的所有全部反转.如果有小于 2k 但大于或等于 k 个字符,则反转前 ...

  10. 095 Unique Binary Search Trees II 不同的二叉查找树 II

    给出 n,问由 1...n 为节点组成的不同的二叉查找树有多少种?例如,给出 n = 3,则有 5 种不同形态的二叉查找树:   1         3     3      2      1    ...