CSS中實現li按下效果通常用的是偽類選擇器::active
li:active { background-color: gray; }
上面的代碼表示當li被點擊時,背景色變為灰色。
如果希望點擊后立即恢復原來的樣式,可以給:hover和:active加上transition屬性:
li:hover, li:active { background-color: gray; transition: background-color 0.2s ease; }
上面的代碼表示當鼠標懸?;螯c擊時,背景色變為灰色,且通過transition屬性讓變化過程更加平滑。
如果li有其他樣式,可以根據情況對:hover和:active的選擇器進行限制,例如:
li.button:hover, li.button:active { background-color: gray; color: white; transition: background-color 0.2s ease; }
上面的代碼表示只有具有.button類名的li元素被懸?;螯c擊時才會出現按下效果,且背景色為灰色,文字顏色為白色。
上一篇css li a居中顯示
下一篇css3垂直中心代碼