jQuery实现当鼠标移动到当前行时当前行高亮显示

最新推荐文章于 2023-12-28 19:25:44 发布

山山而川-T

最新推荐文章于 2023-12-28 19:25:44 发布

阅读量911

点赞数 1

分类专栏： jquery 随笔

本文链接：https://blog.csdn.net/Valentine_T/article/details/104781714

版权

jquery 随笔专栏收录该内容

1 篇文章 0 订阅

订阅专栏

效果图如下
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src = "jquery.min.js"></script>
	<style type="text/css">		
		.table-c table{
			border-right:1px solid #F00;
			border-bottom:1px solid #F00;
		}
		.table-c table td{
			border-left:1px solid #F00;
			border-top:1px solid #F00;
		}
	</style>
</head>
<body>
<div class="table-c">
<table width="400" border="0" cellspacing="0" cellpadding="0">
	<tr>
		<td width="105">姓名</td>
		<td width="181">年龄</td>
		<td width="112">地址</td>
	</tr>
	<tr>
		<td width="105">法师</td>
		<td width="181">18</td>
		<td width="112">峡谷</td>
	</tr>
	<tr>
		<td width="105">战士</td>
		<td width="181">18</td>
		<td width="112">峡谷</td>
	</tr>
	<tr>
		<td width="105">坦克</td>
		<td width="181">18</td>
		<td width="112">峡谷</td>
	</tr>
</table>
</div>
	</table>
	<script >
		$(function() {
		//:gt() 选择器选取 index 值大于指定数字的元素,index 值从 0 开始。
		//tr:gt(0)  从第一行开始，跳过标题
			$("tr:gt(0)").mouseover(function(){
		      $(this).css('background-color','lightblue');					
			});			  
            $("tr:gt(0)").mouseout(function(){
		     $(this).css('background-color','white');			
			});
		})
</script>
</body>
</html>

山山而川-T

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现当鼠标移动到当前行时当前行高亮显示

效果图如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src = "jquery.min.js"></script> <style type...
复制链接

扫一扫