CSS中可以利用:hover偽類來實現鼠標經過列表變色的效果。這個效果很常見,一般是用于美化網站的菜單欄或導航欄。
li:hover { background-color: #eee; }
上面的代碼實現了鼠標經過li元素時,背景顏色變為淺灰色。可以在CSS中修改顏色的數值來實現自己想要的效果。
要注意的是,這個效果只在鼠標懸浮在列表項上時才會出現,當鼠標移開時,效果也會立刻消失。
如果要在鼠標點擊時保持樣式不變,可以使用:active偽類,例如:
li:hover, li:active { background-color: #eee; }
上面的代碼實現了當鼠標懸浮在列表項上或者點擊列表項時,背景顏色都會變為淺灰色。
總體來說,利用CSS實現鼠標經過列表變色是一個簡單的效果,但卻可以讓網站看起來更加美觀和友好。
上一篇css盒子模型論文
下一篇css盒子背景半透明