鼠标经过图片时，飞入另外一张图片。
Posted 树叶的一生
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了鼠标经过图片时，飞入另外一张图片。相关的知识，希望对你有一定的参考价值。
html代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="css/css.css">
</head>
<body>
<br />
<br />
<br />
<div style="margin-left:100px;">
<table width="200" >
<tr>
<td> <div class="btn01" style="height:183px; width:250px; margin-right:18px;">
<img src="img/rolling1.png" >
<div class="ovrly"></div>
</div></td>
<td> <div class="dtl04" style="margin-right:18px;">
<img src="img/rolling1.png" >
<div class="dtl"> </div>
</div></td>
<td>
<div class="btn03" style="margin-right:18px;">
<img src="img/rolling1.png" >
<div class="ovrly"></div>
</div></td>
</tr>
</table>
</div>
</body>
</html>
css.css样式文件：
@charset "utf-8";
/* CSS Document */
.btn01 {
width: 100%;
overflow: hidden;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.btn01 img {
position: relative;
width: 100%;
top: 0;
left: 0;
}
.btn01 .ovrly {
background-image:url(../img/rolling2.png);
height: 100%;
left: 0;
top: -100%;
width: 100%;
position: absolute;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.btn01:hover .ovrly {
top: 0;
}
.btn03 {
height:183px;
width:250px;
overflow: hidden;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.btn03 img {
position: relative;
height:183px;
width:250px;
top: 0;
left: 0;
}
.btn03 .ovrly {
background-image:url(../img/rolling2.png);
height: 100%;
left: 0;
top: 100%;
width:250px;
position: absolute;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.btn03:hover .ovrly {
top: 0;
}
.dtl04 {
height:183px;
width:250px;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.dtl04 img {
position: relative;
height:183px;
width:250px;
top: 0;
left: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.dtl04 .dtl {
position: absolute;
background-image:url(../img/rolling2.png);
height:183px;
width:200px;
top: 70%;
padding: 0 15px 0 15px;
left: 0;
opacity: 0;
z-index: 1;
overflow: auto;
visibility: hidden;
-webkit-transition: all 0.3s 0.15s;
-moz-transition: all 0.3s 0.15s;
-o-transition: all 0.3s 0.15s;
transition: all 0.3s 0.15s;
}
.dtl04:hover .dtl {
top: 0;
opacity: 1;
visibility: visible;
}
以上是关于鼠标经过图片时，飞入另外一张图片。的主要内容，如果未能解决你的问题，请参考以下文章
flash as3 图片展示将鼠标移到图片上就显示文字，然后再点击文字后移除并且显示下一张图片