CSS3 :hover 因上层元素覆盖而无效，如何解决？

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>网页标题</title>
    <style>
      body{
        width: 100%;
        height: 100%;
      }
      .div1, div2{
        position: fixed;
        width: 100%;
        height: 100%;
      }
      a{
        color: #000000;
      }
      a:hover{
        color: #808080;
      }
    </style>
  </head>
  <body>
    <div class="div1">
      <a href="about:blank">链接</a>
    </div>
    <div class="div2">
      <p>----------------文字</p>
    </div>
  </body>
</html>

a:hover不生效，删除div.div2就生效了。
如何达到：不删除或隐藏div.div2，也能让div.div1中的a:hover生效？

用z-index给层级关系

闲着就回答一下吧
你的代码，你这个是不是写错了

 .div1, div2{
        position: fixed;
        width: 100%;
        height: 100%;
      }

应该是这样吧

 .div1,.div2{
        position: fixed;
        width: 100%;
        height: 100%;
      }

对于你的问题的话你的div1和div2都是 position: fixed,那么这两个都会形成一个层叠上下文。默认都是z-index:auto,当元素的层叠水平一致、层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素。在html文件中div2在div1的后面，所以div2会覆盖div1.
对于z-index这个属性，标签的position属性不是static时(可以是fixed、relative、absolute)，设置z-index才会生效
如果一个标签的父标签处于层叠上下文中，那么这个子标签z-index属性不可以和父标签之外的其他标签比较，也就是子标签的z-index只会和他的兄弟标签比较
如果一个标签的父标签不是处于层叠上下文中，那么子标签的z-index属性可以和父标签之外的其他标签比较
比如position 值为 absolute或 relative且 z-index 值不为 auto 的元素或者 position 值为 fixed会导致形成一个层叠上下文

废话了那么多，那么要使你的div1里的a标签不被覆盖，最简单的方案就是，设置div2的z-index为-1，你就可以点到那个a标签了，当然还有其他方案，不过对于这个就可以解决了