Scrolling does not work when hovering a fixed element

Question

Scrolling does not work when hovering a fixed element

To make it short, I have a site with two tags, one pinned to the left and one pinned to the right of the screen. When you are not hovering over them, you can scroll as usual, but when you hover over them, you can no longer scroll until you exit them.

Website - http://www.kuhlswaine.com

Here are the two tags that I mean along with my CSS -

CSS and 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>