本章介绍一下如何利用原生的javascript实现当鼠标悬浮于当前单元格的时候,能够让其背景变色。

代码如下:
   [ bootstrap ] 运行代码    下载代码
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="https://www.51qianduan.com/" />  
<title>51前端</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; 
} 
</style> 
<script>
window.onload=function(){
  var otable=document.getElementById("table"); 
  var preTd=null;
  otable.onmouseover=function(ev){
    var ev=window.event||ev;
    var target=ev.target||ev.srcElement;
    if(target.tagName=="TD"){
      if(preTd!=null){
        preTd.style.backgroundColor="";
      }
      target.style.backgroundColor="blue";
      preTd=target
    }
  }
}
</script>
</head> 
<body> 
<table id="table" class="table"> 
  <thead> 
    <tr> 
      <th>51前端一</th> 
      <th>51前端二</th> 
    </tr> 
  </thead> 
  <tr> 
    <td>javascript教程</td> 
    <td>jQuery教程</td> 
  </tr> 
  <tr> 
    <td>HTML教程</td> 
    <td>div css教程</td> 
  </tr> 
</table> 
</body> 
</html>

代码描述:javascript鼠标悬浮 td单元格变色效果。javascript鼠标悬浮td单元格变色效果代码下载



130 173



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册



×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到