代码描述:javascript鼠标悬浮 td单元格变色效果。javascript鼠标悬浮td单元格变色效果代码下载
本章介绍一下如何利用原生的javascript实现当鼠标悬浮于当前单元格的时候,能够让其背景变色。 代码如下:
<!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>
请绑定手机号,在继续操作
注意:只有绑定手机以后,才可使用网站全部功能