鼠标放在表格上使当前行高亮显示

最新推荐文章于 2021-01-13 00:53:30 发布

sytylyl

最新推荐文章于 2021-01-13 00:53:30 发布

阅读量3.4k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/sytylyl/article/details/8156620

版权

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍如何使用CSS和JavaScript实现当鼠标悬停在表格行上时，该行会改变背景颜色的效果。通过简单的代码示例展示了如何定义CSS样式，并结合jQuery来添加和移除特定的类，从而实现鼠标悬停时的视觉反馈。

摘要由CSDN通过智能技术生成

1、css文件：

tr.highlight td {   
    background:#8dca83; /*这个将是鼠标高亮行的背景色*/  
}

2、html

<script>
$(function(){ //加载完成
 $("#list tr").mouseover(function(){   
      //如果鼠标移到class为list的表格的tr上时，执行函数 ，给该行添加class
      $(this).addClass("highlight");
  });
  $("#list tr").mouseout(function(){   
       //当鼠标移出该行时执行函数  ,移除class
      $(this).removeClass("highlight");
  });   
 });

</script>

<table width="100%" border="1" align="center" id="list">
     <tr><td>22</td><td>22</td></tr>
     ...
</table>

3、table中的id="list"也可以换做class=“list1";相应的js换做$(".list tr")