通过鼠标在某个图像上盘旋，实现大图浏览。

鼠标经过图片显示大图：

<div>
	<ul class="hoverbox">
		<li><a href="#">
			<img src="1.jpg" alt="description" class="preview" />
			<img src="1.jpg" alt="description" /></a>
		</li>
	</ul>
</div>

 

css外部文件样式：

.hoverbox{cursor: default; list-style: none;} /*去掉列表项前的符号*/
.hoverbox a{cursor: default;}                 
.hoverbox a .preview{display: none;}          /*大图初始加载为不显示*/
.hoverbox a:hover .preview{                   /*派生器选择声明*/
	display: block;
	position:absolute;
	top: 33px;
	left: 45px;
	z-index: 1;
}

.hoverbox img{                                /*定义图像样式*/
	background: #fff;
	border-color: #aaa #ccc #ddd #bbb;
	border-style: solid;
	border-width: 1px;
	color: inherit;
	padding: 2px;
	vertical-align: top;
	width: 100px;
	height: 75px;
}

.hoverbox .preview{                           /*定义大图样式*/
	border-color: #000;
	width: 200px;
	height: 150px;
}

 

效果图如下：