js+css 简单的高亮选中对象

功能：
点击列表中的对象时，为选中对象加上边框（高亮显示）。

实现过程：
1.为每个对象指定css名称：mycss
2.定义两个css，一个overcss，一个outcss
3.通过mycss为每个对象绑定mouseover，mouseout，click三个事件的处理，在处理中操作css从而实现选中对象时的高亮显示。

注：本文使用了jquery用于方便定位对象。

以下是sample：

		$(".myclip-item-link").mouseover(function() {
			// 鼠标移到超链接上时，加上边框
			$(this).addClass("myclip-item-over");
		}).mouseout(function() {
			// 鼠标移出超链接时，去掉边框
			$(this).removeClass("myclip-item-over");
		}).click(function(){
			// 点击超链接后，加上高亮边框（同时去掉其它超链接的高亮边框）
			$(".myclip-item-link").removeClass("myclip-item-highlight");
			$(this).addClass("myclip-item-highlight");
		});

<style>
.myclip-item-link {
	display: block;
	height: 105px;
	outline-style: solid;
	outline-color: #AAAAF0;
	outline-width: 1px;
}

.myclip-item-over {
	outline-style: solid;
	outline-color: #FFAAA0;
	outline-width: 2px;
}

.myclip-item-highlight {
	outline-style: solid;
	outline-color: #FFAAA0;
	outline-width: 3px;
}
</style>

...
...
...
		<ul>
			<li>
				<div class="myclip-item">
					<a href="javascript:void(0);" class="myclip-item-link">
						<div>
							<img src="img/1.gif" alt="" width="75" height="75">
						</div>
						<div class="myclip-item-desc">
							2012/08/22 17:42:30
						</div>
					</a>
				</div>
			</li>
			<li>
				<div class="myclip-item">
					<a href="javascript:void(0);" class="myclip-item-link">
						<div>
							<img src="img/2.jpg" alt="" width="75" height="75">
						</div>
						<div class="myclip-item-desc">
							2012/08/22 17:42:30
						</div>
					</a>
				</div>
			</li>
		</ul>
...
...
...