欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

移動(dòng)端網(wǎng)頁解決CSS的active偽類無效的方法

freshlover的專欄   發(fā)布時(shí)間：2015-09-26 12:00:52   作者：清楓草塘   我要評論
這篇文章主要介紹了移動(dòng)端網(wǎng)頁解決CSS的active偽類無效的方法,注意一下移動(dòng)端各個(gè)瀏覽器的兼容問題,需要的朋友可以參考下

：active偽類常用于設(shè)定點(diǎn)擊狀態(tài)下或其他被激活狀態(tài)下一個(gè)鏈接的樣式。最常用于錨點(diǎn)<a href="#">這種情況，一般主流瀏覽器下也支持其他元素，如button等。在多按鍵的鼠標(biāo)系統(tǒng)中，：active只適用于主按鍵，目前的大部分情況都是左鍵即主鍵。
該偽類下定義的CSS樣式只在按下鼠標(biāo)按鈕與釋放鼠標(biāo)按鈕之間的短暫瞬間被觸發(fā)顯示。使用鍵盤的tab鍵也可以觸發(fā):active狀態(tài)。


說到：active偽類就不得不提到:link,:visited,:hover,:active這個(gè)四個(gè)，最常用的是用于a鏈接，設(shè)定鼠標(biāo)交互時(shí)不同的鏈接顏色。如下示例：

CSS Code復(fù)制內(nèi)容到剪貼板
  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放到最后，則會(huì)導(dǎo)致以下結(jié)果：若鏈接已經(jīng)被訪問過，a:visited會(huì)覆蓋:active和:hover的樣式聲明，鏈接將總是呈現(xiàn)為紫色，無論鼠標(biāo)懸停還是按下激活，鏈接都將保持為紫色。

基于此原因，上述代碼必須按照順序定義，一般稱為LVHA-order: :link — :visited — :hover — :active，為方便記憶，可記為“LOVE HATE”

L :link
O
V :visited
E


H :hover
A :active
T
E


瀏覽器兼容性：

項(xiàng)目中是移動(dòng)端頁面要做一個(gè)按鈕狀態(tài)切換的效果，在PC上測試沒有問題，到了手機(jī)端發(fā)現(xiàn)安卓的正常，iOS則沒有效果。


源碼：

CSS Code復(fù)制內(nèi)容到剪貼板
  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復(fù)制內(nèi)容到剪貼板
  1. <div class="row tc row-sbtn"><span id="slotbtn" class="slotbtn"></span></div>    

頁面截圖：

雖然知道jQuery Mobile框架中常會(huì)用操作class的方法來進(jìn)行按鈕狀態(tài)切換，不過覺得非常繁瑣，性能不好。而且我們有:active的天然定制屬性，為何不用而舍近求遠(yuǎn)呢？？

經(jīng)過一番查找，之后在mozilla開發(fā)社區(qū)找到了：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系統(tǒng)的移動(dòng)設(shè)備中，需要在按鈕元素或body/html上綁定一個(gè)touchstart事件才能激活:active狀態(tài)。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. document.body.addEventListener('touchstart', function () { //...空函數(shù)即可});    


將上述事件監(jiān)聽代碼加上后，Safari Mobile上就可以看到按鈕按下后的切換效果了。

相關(guān)文章

最新評論