zoukankan      html  css  js  c++  java
  • 移动端:active伪类无效的解决方法

    :active伪类常用于设定点击状态下或其他被激活状态下一个链接的样式。最常用于锚点<a href="#">这种情况,一般主流浏览器下也支持其他元素,如button等。在多按键的鼠标系统中,:active只适用于主按键,目前的大部分情况都是左键即主键。
    该伪类下定义的CSS样式只在按下鼠标按钮与释放鼠标按钮之间的短暂瞬间被触发显示。使用键盘的tab键也可以触发:active状态。


    说到:active伪类就不得不提到:link,:visited,:hover,:active这个四个,最常用的是用于a链接,设定鼠标交互时不同的链接颜色。如下示例:

    [css] view plaincopy在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. }  
    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


    浏览器兼容性:

    ChromeSafariFirefoxOperaIEAndroidiOS
    Yep 2.0.4+ any 4+ 4+ TBD TBD


    项目中是移动端页面要做一个按钮状态切换的效果,在PC上测试没有问题,到了手机端发现安卓的正常,iOS则没有效果。


    源码:

    [css] view plaincopy在CODE上查看代码片派生到我的代码片
     
    1. .slotbtn{  
    2.      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代码:

    [html] view plaincopy在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状态。

    [html] view plaincopy在CODE上查看代码片派生到我的代码片
     
    1. document.body.addEventListener('touchstart', function () { //...空函数即可});  



    将上述事件监听代码加上后,Safari Mobile上就可以看到按钮按下后的切换效果了。

    参考文章:https://developer.mozilla.org/en-US/docs/Web/CSS/:active

    转载请注明来自freshlover的CSDN博客《移动端:active伪类无效的解决方法》      http://blog.csdn.net/freshlover/article/details/43735273

    转载来自 :  http://blog.csdn.net/freshlover/article/details/43735273

  • 相关阅读:
    Codeforces 177G2 Fibonacci Strings KMP 矩阵
    Codeforces Gym100187C Very Spacious Office 贪心 堆
    Codeforces 980F Cactus to Tree 仙人掌 Tarjan 树形dp 单调队列
    AtCoder SoundHound Inc. Programming Contest 2018 E + Graph (soundhound2018_summer_qual_e)
    BZOJ3622 已经没有什么好害怕的了 动态规划 容斥原理 组合数学
    NOIP2016提高组Day1T2 天天爱跑步 树链剖分 LCA 倍增 差分
    Codeforces 555C Case of Chocolate 其他
    NOIP2017提高组Day2T3 列队 洛谷P3960 线段树
    NOIP2017提高组Day2T2 宝藏 洛谷P3959 状压dp
    NOIP2017提高组Day1T3 逛公园 洛谷P3953 Tarjan 强连通缩点 SPFA 动态规划 最短路 拓扑序
  • 原文地址:https://www.cnblogs.com/yudishow/p/4750763.html
Copyright © 2011-2022 走看看