php中文网2
小逗2019-04-12 15:47:54233<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>留言</title>
<style>
.div1{
position:absolute;
right: 0px;
width: 80px;
height:80px;
font-size:50px;
text-align: center;
font-weight: bold;
font-family: 楷体;
border:2px solid #FFE4E1;
box-shadow: 5px 5px 15px #FFE4E1;
}
.div2{
display: none;
width:40px;
height:400px;
font-size:24px;
position:absolute;
right:400px;
top:40px;
font-weight: bold;
border:2px solid #eeeeee;
box-shadow: 5px 5px 15px #F0FFF0;
padding:10px;
}
.div3{
display: none;
width:40px;
height:400px;
font-size:24px;
position:absolute;
right:200px;
top:40px;
font-weight: bold;
border:2px solid #eeeeee;
box-shadow: 5px 5px 15px #F0FFF0;
padding:10px;
}
.box{
position: relative;
width: 600px;
height: 500px;
line-height: 80px;
font-size: 18px;
border:2px solid #FFD39B;
box-shadow: 5px 5px 20px #FFD39B;
margin:200px auto;
}
.div1:hover .div2{display:block;cursor:pointer; }
.div1:hover .div3{display:block;}
/*问：.div:hover能不能同时控制.div2和.div3*/
</style>
</head>
<body>
<div class="box">
<div class="div1" value="">戳
<div class="div2">人生如逆旅</div>
<div class="div3">我亦是行人</div>
</div>
</div>
</body>
</html>