[jQuery]鼠标移动到table上将对应行加亮

原创于 2013-09-30 17:08:49 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

Web前端专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种使用CSS和jQuery实现表格行鼠标悬停改变背景颜色的方法。通过设置表格单元格的背景色为透明，并利用jQuery监听鼠标移入移出事件来改变表格行的背景色。

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

思路：设置td的背景色为继承

table{
	border-collapse:collapse;
}
td{
	border:1px solid #b5d6e6;
	background-color:transparent;
}

然后设置鼠标移入和移出tr的事件

$(this).ready(function(e) {
    $("tr").mouseover(function(e) {
        $(this).css("background-color","#c1ebff");
    });
	$("tr").mouseout(function(e) {
        $(this).css("background-color","#FFF");
    });
});