php中文网2

Original 2019-04-12 15:47:54 233
abstract:<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>留言</title> <style> .div1{ position:absolute; right: 0px; width:
<!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>


Correcting teacher:天蓬老师Correction time:2019-04-12 16:56:24
Teacher's summary:/*问:.div:hover能不能同时控制.div2和.div3*/ 你可以给这几个div . 添加统一的class, 然后针对这个class来设置样式, 实现批量定义

Release Notes

Popular Entries