CSS滑鼠經過連結切換背景圖片例項程式碼
很多導航欄都有這樣的效果,當滑鼠滑過的時候能夠實現背景圖片的切換,算是一個比較好的效果吧,也算是對導航欄最基本的美化了。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> ul li{ list-style:none; width:150px; height:30px; line-height:30px; text-align:center; float:left; margin-left:5px; } ul li a{ display:block; width:150px; height:30px; text-decoration:none; background:blue; } ul li a:hover{background:red} </style> </head> <body> <ul> <li><a href="#">螞蟻部落一</a></li> <li><a href="#">螞蟻部落二</a></li> <li><a href="#">螞蟻部落三</a></li> <li><a href="#">螞蟻部落四</a></li> </ul> </body> </html>
為了便於演示,背景圖片用背景色替代了,在實際應用中只要把背景色替換為背景顏色就可以了。
原理非常的簡單,主要是用到了連結偽類,具體可以參閱CSS偽類選擇符E:hover一章節。
相關文章
- css實現滑鼠滑過切換背景圖片程式碼CSS
- css滑鼠浮劃過切換按鈕背景圖片CSS
- jQuery實現的滑鼠滑過切換圖片程式碼例項jQuery
- 滑鼠虛滑過選項卡切換效果程式碼例項
- css3動態背景圖片程式碼例項CSSS3
- css設定背景圖片樣式程式碼例項CSS
- jQuery選項卡切換圖片效果程式碼例項jQuery
- 導航欄背景切換程式碼例項
- CSS滑鼠移動圖片切換功能CSS
- js圖片切換例項JS
- CSS實現的滑鼠滑過改變連結文字例項程式碼CSS
- CSS例項:滑鼠滑過超級連結文字時改變背景顏色CSS
- css 滑鼠懸浮連結背景變色程式碼CSS
- CSS滑鼠懸浮圖片模糊切換效果CSS
- javascript實現的圖片簡單切換程式碼例項JavaScript
- 滑鼠滑過圖片出現光弧效果程式碼例項
- CSS滑鼠懸浮在連結之上背景變色程式碼CSS
- css圖片變黑白程式碼例項CSS
- 利用css切割圖片程式碼例項CSS
- CSS背景圖片作為連結效果CSS
- 滑鼠滑過連結a實現背景變色程式碼
- CSS條紋背景程式碼例項CSS
- js和css3實現的圖片立體滾動切換效果程式碼例項JSCSSS3
- css取消滑鼠事件程式碼例項CSS事件
- css切背景圖片(background-position)CSS
- css自定義滑鼠指標圖示程式碼例項CSS指標
- CSS設定背景圖片程式碼CSS
- 巧妙的有css合併圖片解決tab切換的背景圖片CSS
- css滑鼠懸浮切換圖片滑鼠離開又恢復預設CSS
- css3控制多個背景圖片移動形成動畫效果程式碼例項CSSS3動畫
- 滑鼠懸浮連結彈出提示程式碼例項
- 滑鼠滑過實現table表格行背景變色程式碼例項
- css實現圖片灰度效果程式碼例項CSS
- css背景虛化效果程式碼例項CSS
- tab選項卡切換例項程式碼
- 滑鼠懸浮連結出現音效效果程式碼例項
- 滑鼠懸浮改變連結樣式程式碼例項
- CSS3發光背景程式碼例項CSSS3