鼠标悬浮表格行变色代码

2018-2-9 10:35| 作者: antzone| 查看: 844| 评论: 1|来自: 蚂蚁部落

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


鲜花

握手

雷人

路过

鸡蛋
发表评论

最新评论

引用 都富贵 2018-4-3 11:45
666

查看全部评论(1)

返回顶部