是否存在条件指针事件属性？

Question

我有一个重叠（即更高的z-index值）div元素，当它悬停时，触发它下面的多个p元素的移动。遗憾的是，这意味着由于较低的z指数值，这些p元素的含量不能被选择，这是必要的。当然，在这种情况下，解决方案通常是为覆盖div提供指针事件的属性：none，尽管在这种情况下这样的属性会阻止悬停效果。

如何解决此问题？

编辑：https://jsfiddle.net/vrq1bnqe/

* {
  margin: 0;
  padding: 0;
  transition: all 0.5s ease-in-out;
}

#hovdetect {
  width: 100vw;
  height: 20vh;
  position: absolute;
  top: 0;
  opacity: 0;
  z-index: 15;
}

.contact {
  position: absolute;
  height: 4vh;
  width: 1;
  top: 2vh;
  left: 2vw;
  font-family: 'Cinzel Decorative', serif;
  color: #808080;
  font-size: 125%;
}

.contact::selection {
  background: #808080;
}

#email {
  left: auto;
  right: 2vw;
  visibility: 0;
}

#header {
  height: 20vh;
  position: relative;
  margin: auto;
  background: #FFFFFF url('img/head.png')center/auto 60% no-repeat;
}

#hovdetect:hover~#header {
  background-position: 2%50%;
  background-size: auto 18%;
}

#hovdetect:hover~#email {
  width: 1;
  left: 2vw;
  right: auto;
  top: 15vh;
}

<div id='hovdetect'></div>
<div id='header'></div>
<div id='navbar'>
</div>
<div class='contact'>
  <p><i class='fa fa-phone' aria-hidden='true'></i> [redacted]</p>
</div>
<div id='email' class='contact'>
  <p>[redacted] <i class='fa fa-keyboard-o' aria-hidden='true'></i></p>
</div>