61,115
社区成员
发帖
与我相关
我的任务
分享
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>鼠标滑过图片放大</title>
<link rel="stylesheet" href="css1.css" media="screen,projection">
<!--[if lte IE 7]>
<link rel="stylesheet" href='ie_fixes.css' type="text/css" media="screen, projection"/>
<![endif]-->
</head>
<body>
<div id="container">
<div class="tupian">
<ul class="hoverbox">
<li>
<a href="#">
<img src="img/shouji_xc_01.jpg">
<img src="img/shouji_xc_01_1.jpg" class="preview" alt="------"/>
</a>
</li>
</ul>
</div>
<div class="tupian">
<div class="t1">
<img title="提示" src="./img/lym01.jpg">
</div>
</div>
</body>
</html>
body {
font-family:Verdana;
font-size:14px;
Margin:0px;
}
#container{
margin:0 auto;
margin-top:6px;
padding:0px;
width:900px;
}
.tupian{
position:relative;
top:0px;
left:0px;
height:95px;
width:auto;
border-right:1px dotted #c60000;
border-bottom:1px dotted #c60000;
border-left:1px dotted #c60000;
padding:0px;
background:#FFFFCC;
}
.t1{
margin:3px;
}
img{
margin:3px;
padding:0px;
border:0px;
/*display:block;*/
}
/*鼠标经过放大*/
.hoverbox
{
position:absolute;
top:0px;
left:-40px;
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:2;
}
.hoverbox img
{
background: #fff;
border-color: #aaa #ccc #ddd #bbb;
border-style: solid;
border-width: 0px;
color: inherit;
padding: 2px;
vertical-align:auto;/*top;*/
width: 135px;/*100*/
height: 92px;/*75*/
}
.hoverbox li
{
text-align:left;
background: #eee;
border-color: #ddd #bbb #aaa #ccc;
border-style: solid;
border-width: 1px;
color: inherit;
display: inline;
float: left;
margin: 0px;
padding: 1px;
position:relative;
left:0px;
}
.hoverbox .preview
{
display: block;
position: absolute;
border-color: #000;
width: 300px;/*200*/
height: 200px;/*150*/
}
/* =Internet Explorer Fixes
.hoverbox a
{
position: relative;
}
.hoverbox a:hover
{
display: block;
font-size: 100%;
z-index: 1;
}
.hoverbox a:hover .preview
{
top: -38px;
left: -50px;
}
.hoverbox li
{
position: static;
}