CSS是一種用于網頁中美化和排版的語言。其中,鼠標移上變色是常用的一種效果,今天我們來學習一下如何使用CSS實現鼠標移上變色效果。
/*CSS代碼*/ a:hover{ color: red; /*鼠標移上鏈接變為紅色*/ } button:hover{ background-color: blue; /*鼠標移上按鈕背景色變為藍色*/ }
上面的代碼實現了鼠標移上鏈接變紅和鼠標移上按鈕背景色變藍的效果。其中“:hover”是CSS中偽類選擇器的一種,表示當元素處于鼠標移上的狀態時觸發。
我們還可以將鼠標移上變色效果應用到其他元素上,比如圖片:
/*CSS代碼*/ img:hover{ opacity: 0.5; /*鼠標移上圖片透明度變為0.5*/ }
上面的代碼實現了鼠標移上圖片透明度變為0.5的效果。這是一個比較實用的效果,可以在鼠標移上圖片時讓圖片稍顯柔和。
總之,鼠標移上變色效果是CSS中經常使用的一種效果,通過偽類選擇器的運用可以很輕松地實現。
上一篇css++刪除線+加粗
下一篇css 鼠標移動變手