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

最新推荐文章于 2018-03-15 15:06:28 发布

ios0213

最新推荐文章于 2018-03-15 15:06:28 发布

阅读量594

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/ios0213/article/details/51740924

版权

CSS 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

<!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>

ios0213

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
鼠标经过图像变大，IE8以下不兼容

无标题文档* { 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: cente
复制链接

扫一扫