遮罩（纯CSS实现）

(bug)做 遮罩&hover显示 设置 display : none 时没效果

1. 遮罩（input type="checkbox"）

实现效果：点击 爸爸1 - 显示爸爸2，点击 爸爸2 -回到 爸爸1 。
实现原理：
  1. 先做一个复选框 <input type="checkbox" id="Name"/>（必须用id,不能用class ，可以选择隐藏掉display：none），再做同级 一个点击层 和 一个同级 遮罩。
  2. 将 label for 链接 input 的名字 Name,意思是 复选框 和 被label 的东西 链接在一起了。
  3. 将 遮罩 display:none 隐藏，再通过 input[type="checkbox"]:checked~遮罩{display: block;}。这里的“~” 一定得这么写，而且 指的是 复选框 下面的兄弟元素。这种方法没有用到定位。

注：

• checkbox 只能设置 id #
• 遮罩只能是同级元素，（或者在同一个爸爸里面）
• input 要用 “~” 链接 遮罩
• label 可以链接 爸爸or爸爸里面的儿子 P

<style type="text/css">
            /*.baba1,.baba2{position: absolute;left: 100px;top: 100px;}*/
            .baba1{background: yellow;
            width: 100px;height: 100px;/*z-index: 2;*/
            }
            .baba2{background: gray;
            /*opacity: .5;*/
            width: 100px;height: 100px;/*z-index: 1;*/
            }
            p.xiaolan,p.xiaohong{font-size: 12px; text-align:center; margin: 30px auto;width: 50px;}
            p.xiaohong{background: red;}
            p.xiaolan{background: skyblue;}
            
                        /*重点*/
            input{display: none;}
            .baba2{display: none;}
            input[type="checkbox"]:checked~.baba2{display: block;}
                
        </style>
        
        <!--check复选框 可以隐藏掉-->
        <input type="checkbox" id="checkA"/>
        
            
        <!--链接  黄块爸爸1 & 复选框-->
        <div class="baba1">
            <label for="checkA"><p class="xiaolan">点击遮罩出现</p></label>
        </div>
        
        <!--点击显示 爸爸2 -->
        <div class="baba2">
            <label for="checkA"><p class="xiaohong">点击返回黄色</p></label>
        </div>