移動端:active偽類無效的解決方法
阿新 • • 發佈：2018-10-31
：active偽類常用於設定點選狀態下或其他被啟用狀態下一個連結的樣式。最常用於錨點<a href="#">這種情況，一般主流瀏覽器下也支援其他元素，如button等。在多按鍵的滑鼠系統中，：active只適用於主按鍵，目前的大部分情況都是左鍵即主鍵。
該偽類下定義的CSS樣式只在按下滑鼠按鈕與釋放滑鼠按鈕之間的短暫瞬間被觸發顯示。使用鍵盤的tab鍵也可以觸發:active狀態。
說到：active偽類就不得不提到:link,:visited,:hover,:active這個四個，最常用的是用於a連結，設定滑鼠互動時不同的連結顏色。如下示例：
O
V :visited
E
H :hover
A :active
T
E
瀏覽器相容性：
專案中是移動端頁面要做一個按鈕狀態切換的效果，在PC上測試沒有問題，到了手機端發現安卓的正常，iOS則沒有效果。
原始碼：
html程式碼：
頁面截圖：
該偽類下定義的CSS樣式只在按下滑鼠按鈕與釋放滑鼠按鈕之間的短暫瞬間被觸發顯示。使用鍵盤的tab鍵也可以觸發:active狀態。
說到：active偽類就不得不提到:link,:visited,:hover,:active這個四個，最常用的是用於a連結，設定滑鼠互動時不同的連結顏色。如下示例：
a:link { /* Essentially means a[href], or that the link actually goes somewhere */ color: blue; } a:visited { color: purple; } a:hover { color: green; } a:active { color: red; }
上述程式碼中，將 :visited放到最後，則會導致以下結果：若連結已經被訪問過，a:visited會覆蓋:active和:hover的樣式宣告，連結將總是呈現為紫色，無論滑鼠懸停還是按下啟用，連結都將保持為紫色。
基於此原因，上述程式碼必須按照順序定義，一般稱為LVHA-order: :link — :visited — :hover — :active，為方便記憶，可記為“LOVE HATE”
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則沒有效果。
原始碼：
.slotbtn{ width: 5.5rem; height: 4rem; background: url(../images/sbtn.png) no-repeat 0 0; -webkit-background-size: 100% auto; background-size: 100% auto; overflow: hidden; cursor: pointer; -webkit-tap-highlight-color:transparent; -webkit-user-select:none; } .slotbtn:active, .slotbtn:focus{ background-image: url(../images/sbtn_active.png); }
html程式碼：
<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>.
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