：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. 洛谷1303 A*B Problem 解题报告

    洛谷1303 A*B Problem 本题地址:http://www.luogu.org/problem/show?pid=1303 题目描述 求两数的积. 输入输出格式 输入格式: 两个数 输出格式 ...

  2. Codeforces - 65D - Harry Potter and the Sorting Hat - 简单搜索

    https://codeforces.com/problemset/problem/65/D 哈利波特!一种新思路的状压记忆化dfs,记得每次dfs用完要减回去.而且一定是要在dfs外部进行加减!防止 ...

  3. swift4.0 方法监听Selector写法总结

    import UIKit class MainViewController: UITabBarController { //MARK:属性 懒加载 lazy var composeBtn = UIBu ...

  4. PhpStorm下载、破解

    下载 去官网下载新版phpstorm 破解 1.打开编辑器, Help->Register->License server,输入http://idea.codebeta.cn (支持10. ...

  5. Memcached 查看帮助

    进入到memcached目录, 输入命令: memcached -h 即可查看帮助 -p<num>要侦听的TCP端口号(默认值:11211) -u<num>udp监听端口号(默 ...

  6. Unity3d 3d角色换装实现原理及步骤

    http://www.cnblogs.com/dosomething/archive/2012/04/15/2450526.html 1.角色模型制作 unity3d支持Skin动画  但是不支持Ph ...

  7. Unity开发MMOARPG游戏解决方案

    http://www.csdn.net/article/2015-05-07/2824634 天神互动是一家已经上市的以研发MMOARPG游戏为主的技术公司,<苍穹变>是天神互动研发的第一 ...

  8. AutoLayout 根据文字、图片自动计算 UITableViewCell 高度

    原文网址: http://lvwenhan.com/ios/449.html 此系列文章代码仓库在 https://github.com/johnlui/AutoLayout ,有不明白的地方可以参考 ...

  9. ssh断开后保持程序运行

    https://blog.csdn.net/gatieme/article/details/52777721 https://blog.51cto.com/zjking/1117828 https:/ ...

  10. freertos之任务

    taskYIELD(): 通知调度器自己放弃运行态,可立即进行任务切换,而不必等到当前任务的时间片耗尽.这对于相同任务优先级的2个任务来说可加速效率.