css pointer-events: никто не работает в chrome

Question

Это странно. У меня есть стрелка, которую пользователь нажимает, чтобы перейти на следующую страницу (это фотогалерея). Итак, у меня есть изображение стрелки, обернутое в тег, где 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. Стрелка скрыта, но курсор пальца курсора выскакивает, и ссылка все еще активна.

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

Answer 1

Класс hide должен быть в теге привязки, а не в теге изображения, потому что он является активным элементом.

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