Чтобы отключить ссылку с помощью CSS, вы можете использовать один из нескольких методов. Вот несколько часто используемых подходов:
- Удалите атрибут 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;сохраняют внешний вид ссылки без функциональности гиперссылки.
- Отключить события указателя. Другой способ отключить ссылку — использовать свойство 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».