滑鼠懸浮表格行變色程式碼

antzone發表於2018-02-09
原文網址 : https://www.softwhy.com/article-3236-1.html

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()一章節。 

相關文章