active偽類在PC端的作用為鼠標(biāo)點(diǎn)擊到放開時(shí)給元素添加樣式用,呈現(xiàn)目標(biāo)被點(diǎn)擊的激活狀態(tài)。
寫法也很簡(jiǎn)單
/** 將a標(biāo)簽點(diǎn)擊時(shí)的背景色改為紅色 **/
a:active{
background-color: red;
}
但是直接在移動(dòng)端這么寫會(huì)發(fā)現(xiàn)沒有效果。查找一番聂受,在mozilla開發(fā)社區(qū)找到了結(jié)果。
<code>[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>.</code>
需要在按鈕元素或body/html上綁定一個(gè)touchstart事件才能激活:active狀態(tài)烤镐。
document.body.addEventListener('touchstart', function (){}); //...空函數(shù)即可
將上述事件監(jiān)聽代碼加上后蛋济,Safari Mobile上就可以看到按鈕按下后的切換效果了。
參考文章:https://developer.mozilla.org/en-US/docs/Web/CSS/:active