Несколько методов отключения ссылок с помощью CSS: подробное руководство

Чтобы отключить ссылку с помощью CSS, вы можете использовать один из нескольких методов. Вот несколько часто используемых подходов:

  1. Удалите атрибут href. Вы можете удалить функциональность гиперссылки, удалив атрибут «href» из тега привязки. Это можно сделать, нацелив конкретную ссылку с помощью селекторов CSS и установив для свойства «href» пустое значение. Вот пример:
<a href="https://www.example.com" class="disabled-link">Disabled Link</a>
.disabled-link {
  pointer-events: none;
  cursor: default;
  color: inherit;
  text-decoration: none;
}

В этом примере свойство CSS pointer-events: none;гарантирует, что ссылка не будет кликабельна, а cursor: default;устанавливает для курсора стиль по умолчанию.. color: inherit;и text-decoration: none;сохраняют внешний вид ссылки без функциональности гиперссылки.

  1. Отключить события указателя. Другой способ отключить ссылку — использовать свойство CSS pointer-events. Это свойство позволяет вам контролировать, может ли элемент быть целью событий указателя, таких как щелчок или наведение курсора. Установка pointer-events: none;на ссылке сделает ее неактивной. Вот пример:
.disabled-link {
  pointer-events: none;
  cursor: default;
}
<a href="https://www.example.com" class="disabled-link">Disabled Link</a>
<script>
  var disabledLinks = document.getElementsByClassName('disabled-link');
  for (var i = 0; i < disabledLinks.length; i++) {
    disabledLinks[i].addEventListener('click', function(event) {
      event.preventDefault();
    });
  }
</script>

Этот код JavaScript предотвращает поведение щелчка по умолчанию при нажатии ссылки с классом «disabled-link».