滑鼠懸浮表格行變色程式碼
table表格是組織資料的利器,本文分享一個十分常見的滑鼠效果,那就是滑鼠懸浮可以實現當前行背景變色。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> .table{ width:300px; height:100px; border:1px solid #ccc; border-collapse:collapse; } .table td,.table th { border:1px solid #ccc; padding:5px; } .hover{ background:#CCC; } </style> <script src="https://code.jquery.com/jquery-3.0.0.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".table tr").hover(function(){ $(this).children("td").addClass("hover") }, function(){ $(this).children("td").removeClass("hover") }) }) </script> </head> <body> <table class="table"> <thead> <tr> <th>螞蟻部落一</th> <th>螞蟻部落二</th> </tr> </thead> <tr> <td>javascript教程</td> <td>jQuery教程</td> </tr> <tr> <td>HTML教程</td> <td>div css教程</td> </tr> </table> </body> </html>
當滑鼠懸浮的時候,能夠實現背景變色效果,程式碼非常的簡單。
相關閱讀:
(1).hover()參閱jQuery hover事件一章節。
(2).children()參閱jQuery children()一章節。
(3).addClass()參閱jQuery addClass()一章節。
相關文章
- js實現的表格隔行變色和滑鼠懸浮變色程式碼JS
- javascript滑鼠懸浮行變色程式碼例項JavaScript
- 實現滑鼠懸浮table表格行背景變色效果
- css 滑鼠懸浮連結背景變色程式碼CSS
- CSS滑鼠懸浮行背景變色效果CSS
- 滑鼠懸浮按鈕背景變色效果程式碼例項
- CSS實現的滑鼠懸浮整行背景變色程式碼CSS
- css滑鼠懸浮div背景變色效果CSS
- jQuery實現的滑鼠懸浮和選中實現表格行背景變色效果jQuery
- jQuery實現的滑鼠在連結懸浮背景變色程式碼jQuery
- 滑鼠懸浮背景變色導航選單
- 滑鼠懸浮實現連結背景變色效果
- 滑鼠懸浮相應的表單行背景變色且有填寫提示程式碼例項
- css滑鼠懸浮顏色動態填充效果程式碼例項CSS
- CSS3實現的滑鼠懸浮文字顏色漸變效果程式碼例項CSSS3
- 滑鼠懸浮改變連結樣式程式碼例項
- CSS滑鼠懸浮在連結之上背景變色程式碼CSS
- Gridview的資料列中實現滑鼠懸浮變色View
- 滑鼠滑過實現table表格行背景變色程式碼例項
- 滑鼠懸浮評分效果程式碼例項
- 滑鼠懸浮彈出滑鼠跟隨層程式碼例項
- el-table滑鼠懸停變色
- javascript實現的滑鼠懸浮當前td單元格變色效果JavaScript
- css滑鼠懸浮tips效果程式碼例項CSS
- 滑鼠懸浮實現翻牌效果程式碼例項
- 直播原始碼,懸浮窗滾動漸變色效果原始碼
- 表格行背景交替變色例項程式碼
- 滑鼠懸浮三形選單變叉號
- 滑鼠懸浮連結彈出提示程式碼例項
- 滑鼠懸浮實現抖動效果例項程式碼
- 滑鼠懸浮文字實現霓虹燈效果程式碼例項
- 滑鼠懸浮連結出現音效效果程式碼例項
- [譯] CSS 變數實現炫酷滑鼠懸浮效果CSS變數
- js滑鼠懸浮連結背景動畫方式漸變效果JS動畫
- 滑鼠懸浮底部具有動態延伸條效果程式碼例項
- 滑鼠懸浮可以伸縮的搜尋框程式碼例項
- js文字內容感應滑鼠懸浮效果程式碼例項JS
- 自定義滑鼠懸浮連結彈出提示程式碼例項