jquery的使用：鼠标移过高亮显示

最新推荐文章于 2023-11-27 18:08:56 发布

最新推荐文章于 2023-11-27 18:08:56 发布 · 622 阅读

文章标签：

#jQuery #CSS #JavaScript #C #C++ #ViewUI

jquery 专栏收录该内容

21 篇文章

订阅专栏

本文介绍如何使用jQuery实现表格行的鼠标悬停高亮效果，包括必要的jQuery插件引入及CSS样式设置，并提供了两种实现方案。

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

既然是要学习jquery，当然你要有javaScript的基本功才行，没有的话，还是先学习js再说，

第一步：要加入两个js的插件（随后可以下载）

<script type="text/javascript" src="script/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="script/jquery-latest.pack.js"></script>

第一个是js主要的插件，第二个是表格用到的插件

第二步：比较简单的一个table

<body>
		<table align="center" width="70%" border="0" cellpadding="3"
			cellspacing="0" borderColor="#cccccc" bgcolor="#efefef">
			
			<thead>
				<tr>
					<th>
						姓名
					</th>
					<th>
						年龄
					</th>
				</tr>
			</thead>
			<tr>
				<td>
					a
					<input type="checkbox" value="c1">
				</td>
				<td>
					b
				</td>
			</tr>
			<tr>
				<td>
					c
					<input type="checkbox" value="c5">
				</td>
				<td>
					d
				</td>
			</tr>
			<tr>
				<td>
					c
					<input type="checkbox" value="c4">
				</td>
				<td>
					d
				</td>
			</tr>
			<tr>
				<td>
					c
					<input type="checkbox" value="c3">
				</td>
				<td>
					d
				</td>
			</tr>
			<tr>
				<td>
					c
					<input type="checkbox" value="c2">
				</td>
				<td>
					d
				</td>
			</tr>
		</table>
	</body>

第三步：

	<style type="text/css">
th {
	background: #6E6E6E;
	color: #FFFFFF;
	line-height: 20px;
	height: 30px;
}
/*td 不是必须设置的 只是为td设置一些，好看点*/
td {
	padding: 6px 11px;
	border-bottom: 1px solid #95bce2;
	vertical-align: top;
	text-align: center;
}

tr.over td {
	background: #cccccc; /*这个将是鼠标高亮行的背景色 这是必须设置的*/
}

第四步：现在是关键了

<script>
	$(document).ready( function() {

 //如果鼠标移表格的tr上时，执行函数

		$("table tr").mouseover(function(){$(this).addClass("over")}),

//鼠标移出tr时，执行函数

		$("table tr").mouseout(function(){$(this).removeClass("over")});
	});
</script>

ok了，

主要是要用到插件

当然不用表格插件也可以作出这种效果

如：

$(document).ready( function() {
		$("table td").mouseout( function() {

			$(this).parent().find("td").each(function(i){ $(this).css({color:"black",background: '#efefef' }) });
				
			});

		$("table td").mouseover( function() {
			
			$(this).parent().find("td").each(function(i){ $(this).css({color:"red",background: '#cccccc' }) });
			});
	});

$("table td")：表格的所有td

$(this).parent()：这个td的父元素 tr

$(this).parent().find("td").each(function(i){ }):然后通过这个父元素节点找到下边的所有的子元素（所有的td）

开始循环，

没找到一个td，就执行这个函数：

$(this).css({color:"black",background: '#efefef' }) 这里的this就是每一个td，然后css