jquery鼠标放上当前行高亮显示

最新推荐文章于 2021-06-23 10:23:17 发布

原创最新推荐文章于 2021-06-23 10:23:17 发布 · 3.3k 阅读

1 ·

CC 4.0 BY-SA版权

jquery 专栏收录该内容

2 篇文章

订阅专栏

本文展示如何使用jQuery实现网页表格的背景颜色交互变化，通过鼠标悬停触发样式更改。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery-1.11.3.min.js"></script>

<title>无标题文档</title>

</head>

<body>


<table width="500" border="2">
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
</table>

</body>
</html>
<script>

window.onload = function(){
          
            $("tr:gt(0)").mouseover(function(){
		      $(this).css('background-color','lightblue');
			
			
			
			
			});
			  
            $("tr:gt(0)").mouseout(function(){
		     $(this).css('background-color','white');
			
			
			
			
			});
        
        
}


</script>