设计：当鼠标移到特定位置时在网页中圈注各功能区，鼠标移开时隐藏圈注，所有的圈注都有淡入淡出的效果。
问题：使用display属性控制圈注的显示与隐藏无法实现过渡效果，使用opacity实现过渡效果又无法隐藏圈注（由于含有圈注的浮动全屏元素覆盖了其他元素，致使用户无法与页面交互）
解决方案：使用css属性z-index改变全屏元素的层级，从而解决覆盖问题（z-index属性决定了元素在网页中的层级，元素默认的z-index值为0，该属性取整数，数值越大层级越高，在页面中该数值大的元素会覆盖在该数值小的元素上面）
效果图：
具体方法：
如果要隐藏的元素是功能元素（这里是左上角区域）的子元素，则可直接通过css的hover伪类实现，只要将功能元素（父元素）的overflow设置为hidden就可以，即使子元素没有消失也会被隐藏在父元素的边界之外，不会影响与其他元素的交互，这样就不需要本文介绍的方法。
但如果要隐藏的元素不是功能元素的子元素，仅通过css就无法实现了。这时候就需要给功能元素注册一个mouseover和mouseleave的事件来实现hover的效果，在事件的回调函数中指定要隐藏的元素，并为其设置opacity和z-index属性的值，示例代码如下：
// 这是圈注元素的父级元素，用来容纳各圈注
.help_write {
position: fixed;
display: flex;
justify-content: space-between;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, .5);
font-size: 20px;
color: #f00;
opacity: 0; // 初始值设为0，一开始是看不见的，但覆盖在了其他元素上方
z-index: -1; // 初始值设置为-1，将该元素叠放在其他元素下方，实现隐藏
transition: opacity .2s; // 过渡效果
}// 下文中的.help选定左上角区域，为其添加mouseover和mouseleave事件实现hover效果
// 鼠标悬停时显示元素
document.querySelector('.help').addEventListener('mouseover', function() {
let markContainer = document.querySelector('.help_read')
markContainer.style.opacity = .8 // 圈注的父级元素透明度设置为0.8
markContainer.style.zIndex = 0 // 圈注的父级元素层级设为0，覆盖在其他元素上
})
// 鼠标移开时隐藏元素
document.querySelector('.help').addEventListener('mouseleave', function() {
let markContainer = document.querySelector('.help_read')
markContainer.style.opacity = 0 // 圈注的父级元素透明度设置为0
markContainer.style.zIndex = -1 // 圈注的父级元素层级设为-1，下沉到其他元素下面
})
