[jQuery] Hover(over, out) 事件

[jQuery] Hover(over, out) 事件

說明:

  • 類似Javascript中的onMouseOver, onMouseOut
  • 可一次設定某(些)物件的Over,Out動作

範例:


<HEAD>
<script type="Text/JavaScript" src="js/jQuery.js"></script>
<script type="Text/JavaScript">
$(document).ready(function(){
	$('div').hover(
			function()
			{
				$(this).addClass('iOver');
			},
			function()
			{
				$(this).removeClass('iOver');
				//$(this).addClass('iOut');
			}
		);
	$('#myBd tr').hover(
		function(){
			$(this).addClass('iOver');
		}
	,
		function(){
			$(this).removeClass('iOver');
		}
	);
})
</script>
<style type="Text/Css">
	.iOver
	{
		background-Color:yellow;
		color:blue;
	}
	.iOut
	{
		background-Color:white;
		color:black;
	}
</style>
</HEAD>
<BODY>
<FORM action="" method=POST id=form1 name=form1>
<div>這是第1個div</div>
<div>這是第2個div</div>
<div>這是第3個div</div>
<div>這是第4個div</div>

<table>
	<thead>
		<tr>
			<th>aaa</th>
			<th>aaa</th>
			<th>aaa</th>
		</tr>
	</thead>
	<tbody id="myBd">
		<tr>
			<td>dddd</td>
			<td>dddd</td>
			<td>dddd</td>
		</tr>
		<tr>
			<td>dddd</td>
			<td>dddd</td>
			<td>dddd</td>
		</tr>
		<tr>
			<td>dddd</td>
			<td>dddd</td>
			<td>dddd</td>
		</tr>
		<tr>
			<td>dddd</td>
			<td>dddd</td>
			<td>dddd</td>
		</tr>
		<tr>
			<td>dddd</td>
			<td>dddd</td>
			<td>dddd</td>
		</tr>
	</tbody>
</table>
</FORM>
</BODY>
</HTML>

以下是簽名:


Microsoft MVP
Visual Studio and Development Technologies
(2005~2019/6) 
topcat
Blog:http://www.dotblogs.com.tw/topcat