CSS實現的滑鼠滑過改變連結文字例項程式碼
滑鼠滑過的時候,有時候需要改變連結中的文字,這個如果使用js就比較好實現,當然使用CSS也並不難,下面就是一段這樣的程式碼例項,下面就做一下介紹,希望對需要的朋友帶來一定的幫助。
程式碼如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> #Menu{ width:500px; margin:50px auto; border:1px solid #CCC; overflow:hidden; } #Menu ul{ margin:0; padding:0; list-style:none; } #Menu li{ width:100px; height:22px; line-height:22px; float:left; overflow:hidden; text-align:center; } #Menu a{ width:100px; float:left; overflow:hidden; } #Menu span{ display:block; margin-top:-22px; } #Menu a:hover{padding-top:22px;} </style> </head> <body> <ul id="Menu"> <li><a href="#"><span>HOME</span>首頁</a></li> <li><a href="#"><span>NEWS</span>新聞</a></li> <li><a href="#"><span>ABOUT</span>關於</a></li> <li><a href="#"><span>CONTACT</span>聯絡</a></li> <li><a href="#"><span>照片</span>PHOTO</a></li> </ul> </body> </html>
當滑鼠懸浮在連結上的時候,能夠實現文字的切換,下面簡單介紹一下實現原理。
原理其實很簡單,之所以英文文字沒有顯示,是因為將span元素的margin-top值設定為-22px,這個值恰好是li元素的高度,這樣英文文字就被隱藏了,當滑鼠放在連結上的時候,會連結的padding-top屬性值設定為22px,這樣span元素就可以顯示了。
相關文章
- CSS例項:滑鼠滑過超級連結文字時改變背景顏色CSS
- 滑鼠滑過連結a實現背景變色程式碼
- 滑鼠滑過實現table表格行背景變色程式碼例項
- 滑鼠懸浮改變連結樣式程式碼例項
- 滑鼠滑過實現淡入淡出效果程式碼例項
- jQuery實現的滑鼠滑過切換圖片程式碼例項jQuery
- jQuery實現的滑鼠滑過圖片上縮彈出文字說明程式碼例項jQuery
- CSS3實現的滑鼠懸浮文字顏色漸變效果程式碼例項CSSS3
- CSS滑鼠經過連結切換背景圖片例項程式碼CSS
- 滑鼠滑過圖片出現光弧效果程式碼例項
- css實現滑鼠滑過切換背景圖片程式碼CSS
- 滑鼠虛滑過選項卡切換效果程式碼例項
- 滑鼠懸浮文字實現霓虹燈效果程式碼例項
- 滑鼠懸浮連結出現音效效果程式碼例項
- CSS3滑過光束效果程式碼例項CSSS3
- 純css實現點選連結無效程式碼例項CSS
- css實現的滑鼠滑過星星高亮效果CSS
- css3實現滑鼠懸浮劃過光弧效果程式碼例項CSSS3
- jQuery實現的滑鼠滑過連結出現自定義提示效果jQuery
- 滑鼠滑過改變元素的背景圖片
- css 滑鼠懸浮連結背景變色程式碼CSS
- css3實現的文字下滑出現效果程式碼例項CSSS3
- css實現的多行文字垂直居中效果程式碼例項CSS
- CSS3實現的禁止文字選中程式碼例項CSSS3
- css實現的多行文字垂直居中程式碼例項CSS
- css3實現的文字陰影效果程式碼例項CSSS3
- css取消滑鼠事件程式碼例項CSS事件
- css3程式碼實現的滑鼠懸浮按鈕效果程式碼例項CSSS3
- jquery實現的滑動門程式碼例項jQuery
- canvas實現文字線性漸變效果程式碼例項Canvas
- CSS滑鼠懸浮在連結之上背景變色程式碼CSS
- jQuery實現滑動門程式碼例項jQuery
- 滑鼠懸浮連結彈出提示程式碼例項
- css實現的背景透明文字不透明例項程式碼CSS
- 滑鼠懸浮上浮出現說明文字程式碼例項
- css實現梯形程式碼例項CSS
- css實現一個文字兩種顏色程式碼例項CSS
- jQuery實現的滑鼠在連結懸浮背景變色程式碼jQuery