在悬停固定元素时滚动不起作用

Question

为了简短起见，我有一个带有两个标签的网站，一个固定在左边，另一个固定在屏幕右边。当你没有悬停它们时，你可以像平常一样滚动，但是当你将鼠标悬停在它们上面时，你就不能再滚动直到你将鼠标移出它们。

网站是 - http://www.kuhlswaine.com

以下是我所指的两个标签及其CSS -

CSS＆amp; HTML

    #hover-zone-left {
      background-color: transparent;
      height: 100%;
      left: 0;
      position: fixed;
      top: 0;
      width: 10%;
      z-index: 9;
    }
    #hover-zone-right {
      background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
      height: 100%;
      position: fixed;
      right: 16px;
      top: 0;
      width: 10%;
      z-index: 99999;
    }

<a id="hover-zone-left" class="prev-button special-anchor hover-zone" href="#"></a>
<a id="hover-zone-right" class="next-button special-anchor hover-zone" href="#"></a>