Weird Event Handling

I made a simple website that contains images of arrows (png) on the left and right with fixed positioned, that link to the next page. The problem is that the cursor can not select the anchor element that contains the image, as seen in this GIF.

Here is the code for the elements:

<a class="arrow-left" href="previousPage.php"><img src="img/left.png"></a>
<a class="arrow-right" href="nextPage.php"><img src="img/right.png"></a>

As you can see it is plain html code and the .arrow-left and .arrow-right classes are styled with scss:

.arrow-right {
  position: fixed;
  max-width: 3%;
  z-index: 10;
  right: 1%;
  top: 50%; }

.arrow-left {
  position: fixed;
  max-width: 3%;
  z-index: 10;
  left: 1%;
  top: 50%; }