CSS中有一個可用于實現(xiàn)鼠標(biāo)按下效果的偽類選擇器:active
。當(dāng)用戶按下鼠標(biāo)按鈕時,選擇器會匹配到該元素并應(yīng)用相應(yīng)的樣式,如下:
:active { background-color: #ccc; }
以上代碼會讓鼠標(biāo)按下該元素時,元素背景色變?yōu)榛疑?/p>
在實際應(yīng)用中,:active
選擇器通常用于按鈕和鏈接等交互元素上,以提高用戶的交互體驗。下面是一個例子:
<button class="btn">點擊我</button> .btn { display: inline-block; padding: 10px; background-color: #333; color: #fff; border: none; cursor: pointer; } .btn:active { background-color: #999; }
以上代碼會生成一個灰色背景的按鈕,當(dāng)用戶點擊該按鈕時,背景色變?yōu)闇\灰色。
需要注意的是,:active
選擇器僅在鼠標(biāo)按鈕按下或觸摸屏幕時匹配元素。在鼠標(biāo)按鈕釋放或手指離開屏幕后,樣式會恢復(fù)為默認(rèn)狀態(tài)。