Css pointer-events: ни один из них не работает в chrome

Это странно. У меня есть стрелка, которую пользователь нажимает, чтобы перейти на следующую страницу (это фотогалерея). Итак, у меня есть изображение стрелки, завернутое в тег с href, указывающим на следующую страницу. Это жестко закодировано.

 <a href = "thepagetogoto08.html"><img src = "images/next.gif" alt = "Right arrow" class = "hide"></a>

На последней странице, когда мне не нужна стрелка и я не хочу, чтобы пользователь щелкнул, чтобы получить несуществующую страницу, я добавляю класс «скрыть».

В моей таблице стилей у меня есть:

.hide {
  visibility: hidden;
  pointer-events: none;
  cursor: default;
}

Странно то, что он на самом деле работает в Safari (рабочий стол, еще не тестировался на IOS), но не в Chrome, Firefox или Opera. Стрелка скрыта, но указатель пальца курсора всплывает, а ссылка по-прежнему активна.

Нужны ли события-указатели для вебкита или лучше просто найти какой-то другой способ сделать это?