移动端⽹页解决CSS的active伪类⽆效的⽅法
：active伪类常⽤于设定点击状态下或其他被激活状态下⼀个链接的样式。最常⽤于锚点<a href="#">这种情况，⼀般主流浏览器下也⽀持其他元素，如button等。在多按键的⿏标系统中，：active只适⽤于主按键，⽬前的⼤部分情况都是左键即主键。
该伪类下定义的CSS样式只在按下⿏标按钮与释放⿏标按钮之间的短暂瞬间被触发显⽰。使⽤键盘的tab键也可以触发:active 状态。
说到：active伪类就不得不提到:link,:visited,:hover,:active这个四个，最常⽤的是⽤于a链接，设定⿏标交互时不同的链接颜⾊。如下⽰例：
CSS Code复制内容到剪贴板
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. }
css鼠标点击样式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
浏览器兼容性：
项⽬中是移动端页⾯要做⼀个按钮状态切换的效果，在PC上测试没有问题，到了⼿机端发现安卓的正常，iOS则没有效果。
源码：
CSS Code复制内容到剪贴板
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代码：
XML/HTML Code复制内容到剪贴板
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状态。
CSS Code复制内容到剪贴板
1. document.body.addEventListener('touchstart', function () { //...空函数即可});
将上述事件监听代码加上后，Safari Mobile上就可以看到按钮按下后的切换效果了。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。