CSS點擊事件是一種十分常見和實用的功能,可以實現利用鼠標點擊改變元素的樣式,從而使頁面更加生動。為了實現點擊事件,我們需要使用CSS偽類選擇器:hover
和:active
。
.btn:hover { background-color: #666; color: #fff; } .btn:active { background-color: #333; color: #fff; }
上述代碼中,.btn
是我們需要改變樣式的元素的類名。當鼠標經過這個元素時,樣式會發生改變,背景色變為深灰色,字體顏色變為白色。而當鼠標按下元素時,樣式會再次改變,背景色變為黑色,字體顏色仍為白色。
除了鼠標的hover和active事件外,我們還可以利用click事件來實現點擊改變樣式的效果。
.btn-click { background-color: #666; color: #fff; } .btn-click.clicked { background-color: #333; color: #fff; }
上述代碼中,我們給元素增加了一個類名.btn-click
,作為元素的默認樣式。當鼠標點擊這個元素時,我們在JavaScript中通過添加類名.clicked
來改變元素的樣式,即背景色變為黑色,字體顏色仍為白色。
以上就是利用CSS實現點擊事件改變樣式的方法。需要注意的是,:active偽類選擇器只有在某個元素被點擊時才會生效,而:hover偽類選擇器只有在鼠標經過元素時才會生效。如果需要實現點擊改變樣式的效果,就需要用到JavaScript來動態修改元素的類名。
下一篇css點擊出現的盒子