目标：鼠标悬浮时显示子类隐藏内容
1. 用display:none;将想要隐藏的内容隐藏
2. 使用hover元素将.box1改为块元素，即可显示出之前隐藏的内容
.
3. 自己练习的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>display-nano</title>
<style type="text/css">
.box{
font-size: 20px;
display: inline-block;
}
.box1{
background-color: green;
font-size: 30px;
width: 100px;
height: 100px;
/*display: none;属性可使元素在页面隐藏显示*/
display: none;
}
.h1{
font-size: 20px;
}
.box:hover .box1{
/*鼠标悬浮时使.box1类变为快元素显示*/
/*注意：不可跨父类悬浮显示*/
display: block;
}
</style>
</head>
<body>
<!--只能在一个大类中悬浮显示，跨父类显示不可-->
<div class="box">
<h1 class="h1">显示东西</h1>
<div class="box1">隐藏的内容</div>
</div>
</body>
</html>
