您的位置：首页 > 其它

鼠标经过图像变大，IE8以下不兼容

2016-06-23 09:52 330 查看 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
body {
background-color: #F2F2F2;
}
.wrap {
width: 55%;
margin: 0 auto;
padding: 50px;
}
.header {
margin-top: 10px;
margin-bottom: 50px;
text-align: center;
color: #600;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
.header p {
border-bottom: 1px dashed #903;
padding: 10px 0;
}
.content{
margin:0;
padding:6px;
}
.img-show{
padding:0;
margin:0;
list-style:none;
cursor: crosshair;
}
.img-show li{
float:left;
padding:3px;
border:1px solid #999;
margin:5px;
background-color:#FFF;
display: inline-block;
position:relative;
}
.img-show li a{
cursor: crosshair;
}
.img-show li a img{ /*此处用img样式会继承给后面影藏的图片样式*/
width:150px;
height:125px;
padding:3px;
border:1px solid #999;
z-index:-1;
}
.img-show .preview{ /*此处若要用新的样式需要用.img-show .preview ,它是在.img-show 样式下面的样式，继承前面的样式也是在.img-show下面，如果直接用.preview 则样式不起作用*/
display:none;
width:275px;
height:175px;
}

.img-show li a:hover .preview{   /*此处是在a:hover 下触发新样式*/
display:block;
position:absolute;
left:-57px;
top:-20px;
z-index:999;
}

.footer{
clear:both;
color:#603;
text-align:center;
margin-top:30px;
padding:10px;
}
</style>
</head>

<body>
<div class="wrap">
<div class="header">
<h1>Hoverbox Image Gallery</h1>
<p>While there is life there is hope</p>
</div>
<div class="content">
<ul class="img-show">
<li><a href="#"><img src="file:///C|/Documents and Settings/Administrator/桌面/mysite/photo01.jpg" /><img src="file:///C|/Documents and Settings/Administrator/桌面/mysite/photo01.jpg" class="preview" /></a></li>
<li><a href="#"><img src="file:///C|/Documents and Settings/Administrator/桌面/mysite/photo02.jpg" /><img src="file:///C|/Documents and Settings/Administrator/桌面/mysite/photo02.jpg" class="preview" /></a></li>
<li><a href="#"><img src="file:///C|/Documents and Settings/Administrator/桌面/mysite/photo03.jpg" /><img src="file:///C|/Documents and Settings/Administrator/桌面/mysite/photo03.jpg" class="preview" /></a></li>
<li><a href="#"><img src="file:///C|/Documents and Settings/Administrator/桌面/mysite/photo04.jpg" /><img src="file:///C|/Documents and Settings/Administrator/桌面/mysite/photo04.jpg" class="preview" /></a></li>
<li><a href="#"><img src="file:///C|/Documents and Settings/Administrator/桌面/mysite/photo05.jpg" /><img src="file:///C|/Documents and Settings/Administrator/桌面/mysite/photo05.jpg" class="preview" /></a></li>
<li><a href="#"><img src="file:///C|/Documents and Settings/Administrator/桌面/mysite/photo06.jpg" /><img src="file:///C|/Documents and Settings/Administrator/桌面/mysite/photo06.jpg" class="preview" /></a></li>
<li><a href="#"><img src="file:///C|/Documents and Settings/Administrator/桌面/mysite/photo07.jpg" /><img src="file:///C|/Documents and Settings/Administrator/桌面/mysite/photo07.jpg" class="preview" /></a></li>
<li><a href="#"><img src="file:///C|/Documents and Settings/Administrator/桌面/mysite/photo08.jpg" /><img src="file:///C|/Documents and Settings/Administrator/桌面/mysite/photo08.jpg" class="preview" /></a></li>
<li><a href="#"><img src="file:///C|/Documents and Settings/Administrator/桌面/mysite/photo09.jpg" /><img src="file:///C|/Documents and Settings/Administrator/桌面/mysite/photo09.jpg" class="preview" /></a></li>
<li><a href="#"><img src="file:///C|/Documents and Settings/Administrator/桌面/mysite/photo10.jpg" /><img src="file:///C|/Documents and Settings/Administrator/桌面/mysite/photo10.jpg" class="preview" /></a></li>
<li><a href="#"><img src="file:///C|/Documents and Settings/Administrator/桌面/mysite/photo11.jpg" /><img src="file:///C|/Documents and Settings/Administrator/桌面/mysite/photo11.jpg" class="preview" /></a></li>
<li><a href="#"><img src="file:///C|/Documents and Settings/Administrator/桌面/mysite/photo12.jpg" /><img src="file:///C|/Documents and Settings/Administrator/桌面/mysite/photo12.jpg" class="preview" /></a></li>
<li><a href="#"><img src="file:///C|/Documents and Settings/Administrator/桌面/mysite/photo13.jpg" /><img src="file:///C|/Documents and Settings/Administrator/桌面/mysite/photo13.jpg" class="preview" /></a></li>
<li><a href="#"><img src="file:///C|/Documents and Settings/Administrator/桌面/mysite/photo14.jpg" /><img src="file:///C|/Documents and Settings/Administrator/桌面/mysite/photo14.jpg" class="preview" /></a></li>
<li><a href="#"><img src="file:///C|/Documents and Settings/Administrator/桌面/mysite/photo15.jpg" /><img src="file:///C|/Documents and Settings/Administrator/桌面/mysite/photo15.jpg" class="preview" /></a></li>
<li><a href="#"><img src="file:///C|/Documents and Settings/Administrator/桌面/mysite/photo16.jpg" /><img src="file:///C|/Documents and Settings/Administrator/桌面/mysite/photo16.jpg" class="preview" /></a></li>
<li><a href="#"><img src="file:///C|/Documents and Settings/Administrator/桌面/mysite/photo17.jpg" /><img src="file:///C|/Documents and Settings/Administrator/桌面/mysite/photo17.jpg" class="preview" /></a></li>
<li><a href="#"><img src="file:///C|/Documents and Settings/Administrator/桌面/mysite/photo18.jpg" /><img src="file:///C|/Documents and Settings/Administrator/桌面/mysite/photo18.jpg" class="preview" /></a></li>
<li><a href="#"><img src="file:///C|/Documents and Settings/Administrator/桌面/mysite/photo19.jpg" /><img src="file:///C|/Documents and Settings/Administrator/桌面/mysite/photo19.jpg" class="preview" /></a></li>
<li><a href="#"><img src="file:///C|/Documents and Settings/Administrator/桌面/mysite/photo20.jpg" /><img src="file:///C|/Documents and Settings/Administrator/桌面/mysite/photo20.jpg" class="preview" /></a></li>
</ul>
</div>
<div class="footer"> <span>适用浏览器：IE(6、7、8)、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗等浏览器</span> </div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航