用H5和CSS如何实现鼠标触碰一个盒子后显示下面隐藏的盒子

  只用H5和CSS较简洁的实现这个效果是有一定难度的，下面提供两种实现思路：

第一种：定位覆盖法：

  顾名思义，这个方法需要用到CSS定位属性（position），被覆盖的盒子称为A盒，用来覆盖的盒子称为B盒。A盒子和B盒的大小设置为一致的，刚开始看到是A盒，利用定位将B盒调整到覆盖A盒的位置,调整完毕之后，设置opacity透明度属性，在鼠标触碰之前A盒透明度为1，B盒透明度0,鼠标触碰之后，B盒透明度改为1，A盒透明度改为0。这种方法是有缺点的，如果开启的是相对定位，B盒所占的空间会影响下面的布局，其次如果定位如果开启的过多，一些其他效果的实现就会比较麻烦，例如居中。

第二种：none隐藏法：

        这个方法是我现阶段能想到的较好的方法，可以根据自己的需要设置几层盒子，举个三层盒子的例子，底层盒子只用设置一个背景颜色或者是背景图片，注意的是中层盒子和外层盒子都是写在底层盒子里的，然后在外层盒子里写上相当于B盒的内容，书写完毕之后，将外层盒子利用display属性设置为none，这时候开始写中间那个盒子相当于A盒里的内容。当鼠标触碰上去之后，将B盒的display属性设置为block，这样实现的副作用较小。

          要注意的是在实现效果较多的时候，把整体效果拆分成小效果一个一个实现的思维是很有必要的。