：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. UVa 658 It's not a Bug, it's a Feature! (状态压缩+Dijstra)

    题意:首先给出n和m,表示有n个bug和m个补丁.一开始存在n个bug,用1表示一个bug存在0表示不存在,所以一开始就是n个1,我们的目的是要消除所有的bug, 所以目标状态就是n个0.对于每个补丁 ...

  2. 洛谷 - P2568 - GCD - 欧拉函数

    https://www.luogu.org/problemnew/show/P2568 统计n以内gcd为质数的数的个数. 求 \(\sum\limits_p \sum\limits_{i=1}^{n ...

  3. 两种好用的清除浮动的小技巧（clearfix hack）

    方法一:使用内容生成的方式清除浮动 这种方法不能解决margin在垂直边界上的叠加问题,如果不涉及margin的边界叠加问题使用这种方法清除浮动就行了 . /* :after 选择器向选定的元素之后插 ...

  4. NGUI研究院之UISprite和UITexture浅谈

    NGUI的三大组件,UILabel.UISprite.UITexture,它们三个同时都继承UIWidget.先回到一个很郁闷的话题上,到底是优化DrawCall还是优化内存. UISprite : ...

  5. Unity3d的批渲染 batch rendering

    http://blog.csdn.net/leonwei/article/details/41942157 批渲染(Batch) batch render 是大部分引擎提高渲染效率的方法,基本原理就是 ...

  6. cdq(2018.10.18)

    一句话题意:给你三个数列{a_i},{b_i},{c_i},保证每个数列都恰好是一个排列.你需要求出满足\(a_i<a_j,b_i<b_j,c_i<c_j\)的有序对\((i,j)\ ...

  7. DBUtils学习一 增删该查

    package com.mozq.jdbc.test; import java.sql.SQLException; import java.util.List; import java.util.Ma ...

  8. iOS开发 - 线程与进程的认识与理解

    进程: 进程是指在系统中正在运行的一个应用程序,比如同时打开微信和Xcode,系统会分别启动2个进程; 每个进程之间是独立的,每个进程均运行在其专用且受保护的内存空间内; 线程: 一个进程要想执行任务 ...

  9. android BottomNavigationView 底部显示3个以上的item

    你现在可以用app:labelVisibilityMode="[labeled, unlabeled, selected, auto] labeled 所有的标签都是可见的. unlabel ...

  10. Python-2-序列及通用序列操作

    序列包括字符串,列表,元祖,序列中的每个元素都有编号,其中只有元祖不能修改   通用序列操作包括索引. 切片. 相加. 相乘和成员资格检查   索引 >>> greeting = ' ...