鼠标经过图片显示大图:
<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;
}
效果图如下: