挪动端网页页面处理CSS的active伪类失效的方式

日期：2021-01-20 类型：科技新闻 

关键词：制作小程序，小程序商城，扫码点餐小程序，微信小程序开店的步骤，牛刀小程序

：active伪类常见于设置点一下情况下或别的被激活情况下1个连接的款式。最常见于锚点<a href="#">这类状况，1般流行访问器下也适用别的元素，如button等。在多功能键的电脑鼠标系统软件中，：active只可用于主功能键，现阶段的绝大多数状况全是左键即主键。
该伪类下界定的CSS款式只在按下电脑鼠标按钮与释放出来电脑鼠标按钮之间的短暂性一瞬间被开启显示信息。应用电脑键盘的tab键还可以开启:active情况。


说到：active伪类就迫不得已提到:link,:visited,:hover,:active这个4个，最常见的是用于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. }     
  7. a:hover {     
  8.   color: green;     
  9. }     
  10. a:active {     
  11.   color: red;     
  12. }    


上述编码中，将 :visited放到最终，则会致使下列結果：若连接早已被浏览过，a:visited会遮盖:active和:hover的款式申明，连接将一直展现为紫色，不管电脑鼠标悬停還是按下激活，连接都将维持为紫色。

根据此缘故，上述编码务必依照次序界定，1般称为LVHA-order: :link — :visited — :hover — :active，为便捷记忆力，可记为“LOVE HATE”

L :link
O
V :visited
E


H :hover
A :active
T
E


访问器适配性：

新项目中是挪动端网页页面要做1个按钮情况切换的实际效果，在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的纯天然订制特性，为什么无需而在网络一直寻觅呢？？

历经1番搜索，以后在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上关联1个touchstart恶性事件才可以激活:active情况。

CSS Code拷贝內容到剪贴板
  1. document.body.addEventListener('touchstart', function () { //...空涵数便可});    


将上述恶性事件监视编码再加后，Safari Mobile上便可以看到按钮按下后的切换实际效果了。

上一篇：应用CSS3的appearance特性更改元素的外型的方式 返回下一篇：没有了