Как отключить ссылку, используя только CSS
Проблема: Есть ли способ отключить ссылку с помощью CSS?
У меня есть класс под названием current-page, и я хочу, чтобы ссылки с этим классом были отключены, чтобы при их нажатии не происходило никаких действий.
5 ответ(ов)
CSS может быть использован только для изменения стиля элементов. В лучшем случае, с помощью чистого CSS вы можете просто скрыть ссылку полностью.
Однако, для достижения желаемого поведения вам понадобится JavaScript. Вот как вы можете реализовать это с использованием библиотеки jQuery:
$('a.current-page').click(function() { return false; });
Этот код отменяет действие клика по ссылке с классом current-page, что необходимо для вашей задачи.
CSS не может полностью отключить ссылку. Он может ограничить события указателя, такие как клики, но клики — это не единственный способ активировать ссылку. У вас есть несколько вариантов:
- Не указывайте атрибуты
hrefилиonclickв вашем теге<a>. - Используйте
document.querySelectorи подобные методы, чтобы найти элементы якоря, которые вы хотите отключить. Удалите их атрибутыhrefилиonclick, чтобы они больше не имели поведения ссылки, которое можно было бы активировать любым способом.
Чтобы применить данный класс .avoid-clicks на HTML, вам нужно добавить его к элементам, для которых вы хотите отключить взаимодействие с помощью указателя (например, клики). Вот пример, как это сделать:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Пример применения класса</title>
<style>
.avoid-clicks {
pointer-events: none;
opacity: 0.6; /* Можно добавить эффект затемнения для наглядности */
}
</style>
</head>
<body>
<div class="avoid-clicks">
Этот элемент не будет реагировать на клики.
</div>
<div>
Этот элемент будет реагировать на клики.
</div>
</body>
</html>
В этом примере, элемент с классом avoid-clicks не будет реагировать на события клика, благодаря свойству CSS pointer-events: none;. Вы также можете добавить другие стили, например, opacity, чтобы обозначить, что элемент неактивен.
Ваш код:
.current-page a:hover {
pointer-events: none !important;
}
не работает так, как вы ожидаете, потому что хотя вы отключаете события указателя на элементе при наведении, это не убирает курсор ссылки в некоторых браузерах. Из-за этого ссылка все еще может мигать или показывать поведение ссылки.
Чтобы исправить это, вы добавили:
.current-page a {
cursor: text !important;
}
Этот код изменяет курсор на text, что создает впечатление, что это не ссылка, и устраняет мигание. Таким образом, эта комбинация стилей помогает вам достигнуть нужного эффекта — убрать эффект ссылки и сделать так, чтобы курсор отображался как текст, когда пользователь наводит на элемент.
Если вы хотите оставаться только в рамках HTML/CSS для формы, то вы можете использовать кнопку. Стилизуйте её и установите атрибут disabled.
Например: http://jsfiddle.net/cFTxH/1/
Получить координаты (X,Y) HTML-элемента
"Как сделать div на 100% высоты окна браузера"
Как создать ненумерованный список без маркеров?
Стилизация кнопки input type="file"
Изменение цвета элемента hr