实战移入切换
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>移入切换</title>
<link rel="stylesheet" type="text/css" href="../reset.css"/>
<style type="text/css">
.box{
404px;height: 304px;border: 2px solid black;margin: 50px auto;position: relative;
}
.zxw{
100px;height: 40px;text-align: center;color: white;
}
.zxw .top{
100%;height: 100%;line-height: 40px;cursor: pointer;
}
.zxw .bot{
400px;height: 258px;line-height: 258px;
position: absolute;left: 0;top: 42px;
}
.zxw:hover .bot{
z-index: 9;
}
</style>
</head>
<body>
<div class="box">
<div class="zxw fl">
<p class="top" style="background: red;">1</p>
<p class="bot" style="background: red;z-index: 1;">1</p>
</div>
<div class="zxw fl">
<p class="top" style="background: green;">2</p>
<p class="bot" style="background: green;">2</p>
</div>
<div class="zxw fl">
<p class="top" style="background: blue;">3</p>
<p class="bot" style="background: blue;">3</p>
</div>
<div class="zxw fl">
<p class="top" style="background: orange;">4</p>
<p class="bot" style="background: orange;">4</p>
</div>
</div>
</body>
</html>