：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. JAVA基础--JAVA API常见对象(其他API)13

    一.其他API 1.System类 system类中的方法和成员变量都是静态的, 不需要创建System对象就可以直接使用. /* * 演示System的使用 */ public class Syst ...

  2. Unity 5.4 公开测试版发布：增强的视觉效果，更佳的性能表现

    为用户提供可靠稳定的产品是我们的一贯使命,现在我们将发布Unity 5.4 beta版本,提供所有的用户公开测试,这包含了Unity Personal Edition版本用户.我们非常希望大家下载并尝 ...

  3. [Xcode 实际操作]七、文件与数据-(15)单例模式的使用

    目录:[Swift]Xcode实际操作 本文将演示单例对象的使用. 在项目名称上点击鼠标右键,弹出右键菜单,选择[New File]新建文件命令, 在弹出的模板选项窗口中,选择[Swift]文件选项, ...

  4. Nginx实现负载均衡（nginx + tomcat应用分布式）

    一.       工具   nginx-1.8.0 apache-tomcat-6.0.33 二.    目标   实现高性能负载均衡的Tomcat集群: 三.    步骤   1.首先下载Nginx ...

  5. C语言提高代码效率的几种方法

    一段完美的代码不仅在于找到一个给定的问题的解决方案,但在它的简单性,有效性,紧凑性和效率(内存).设计的代码比实际执行更难.因此,每一个程序员当用C语言开发时,都应该保持这些基本的东西在头脑中.本文向 ...

  6. [題解]51nod_1515_明辨是非

    好久沒有話多了,是覺得有點浪費時間,今天考試和一中用的一樣的題,結果反而考得不好,不過Jackpei一句知恥而後勇點醒夢中人偷偷@Jackpei 就是這樣吧 還有我極度懷疑我的鍵帽打油了......我 ...

  7. Codeforces Round #541 (Div. 2) B.Draw!

    链接:https://codeforces.com/contest/1131/problem/B 题意: 给n次足球比分,求存在平局的机会. 思路: 结构体存储,unique后,判断是否有分数交叉. ...

  8. [WOJ3010] 骰子

    题目描述: 骰子是一个六面分别刻有一到六点的立方体,每次投掷骰子,理论上得到\(1\)到\(6\)的概率都是\(1/6\). 有骰子一颗,连续投掷\(n\)次,问点数总和大于等于\(X\)的概率是多少 ...

  9. #118. 【UR #8】赴京赶考

    链接:#118. [UR #8]赴京赶考 高中,高中,短暂的三年.NOI是高中结业考试,而高考在每年暑假举行. 高二暑假,这是你最后一次参加高考的机会.你已经为了高考停课很久了,OI的知识很久没管了. ...

  10. 解决Git在更新项目时报凭证错误(Authentication failed)

    报此错误,大概率原因是用户名和密码弄错了,我用的阿里云,在网上找了半天发现Git远程仓库用的用户名和密码不是阿里云登陆用的账户密码,必须另外设置: 链接:code.aliyun.com/profile ...