用css隐藏页面元素的方法有很多种,你可以将opacity设为0.
visibility设为hidden
将display:设为none
将position设为absolute 然后将位置设到不可见的区域(不常用)
(z-index:1; 盒子重叠 数值大的在最上面 opacity:0.5;透明度为0.5,opacity:1,完全不透明.opacity:0;完全透明)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>隐藏元素</title>
<style>
.father{
position:relative;
left:20px;
top:30px;
width:500px;
border:1px solid black;
}
.son{
position:absolute;
left: 200px;
top: 22px;
width:100px;
border:1px solid black;
/*(一)display:none隐藏方法*/
/*display:none;*/
/*(二)opcity:0;*/
/*opacity 属性的意思是设置一个元素的透明度。它不是为改变元素的边界框（bounding box）而设计的。
这意味着将 opacity 设为 0 只能从视觉上隐藏元素。而元素本身依然占据它自己的位置并对网页的布局起作用。
它也将响应用户交互。*/
/*opacity:0;*/
/*(三)visibility:hidden*/
/*将它的值设为 hidden 将隐藏我们的元素。如同 opacity 属性，被隐藏的元素依然会对我们的网页布局起作用。
与 opacity 唯一不同的是它不会响应任何用户交互。此外，元素在读屏软件中也会被隐藏。
这个属性也能够实现动画效果，只要它的初始和结束状态不一样。这确保了 visibility 状态切换之间的过渡动画
可以是时间平滑的（事实上可以用这一点来用 hidden 实现元素的延迟显示和隐藏——译者注）。*/
visibility: hidden;
}
.father:hover .son{
/*(一)显示方法对应一*/
/*display:block;*/
/*(二)*/
/*opacity: 1;*/
/*(三)*/
visibility: visible;
}
</style>
</head>
<body>
<!--需求:
写一个父盒子,和一个子盒子,子绝父相,
子盒子和父盒子的位置绑定,
当鼠标放到父盒子上
子盒子从隐藏状态到显示状态
-->
<!--父盒子-->
<div class="father">
这是一个父盒子,请用鼠标点击来显示父盒子
<!--子盒子-->
<div class="son">
<ul>
<li>列表一</li>
<li>列表二</li>
<li>列表三</li>
<li>列表四</li>
</ul>
</div>
</div>
</body>
</html>