Отключить ссылку перехода с помощью CSS - Форум

Новые сообщения
Участники
Правила форума
Поиск
RSS

Страница 1 из 1
1

Отключить ссылку перехода с помощью CSS (Блокировка ссылок переходов, которая работает при помощи CSS)

Отключить ссылку перехода с помощью CSS

Kosten

Воскресенье, 07 Апреля 2019, 23:56 | Сообщение 1

Администраторы

Сообщений:44490

Награды: 70

« 557 »

Чтобы отключить ссылку с помощью CSS, то здесь используем свойство pointer-events которое определяет, должен ли сработать элемент страницы при нажатие на его. Свойство property-events в CSS управляет реакцией элементов HTML на любые события мыши или при наведение с кликом. При установке атрибута disable ни один из элементов не будет реагировать на любое назначенное действие.

Рассмотрим простой пример:

HTML

Код

<a href="http://zornet.ru/forum/" class="not-active">Ссылка</a>

CSS

Код

.not-active {
pointer-events: none;
cursor: default;
}

Демонстрация

HTML-кода 1

В приведенном ниже коде показано использование свойства-событий, в которых тег отключенный указатель курсора.

Код

<!DOCTYPE html>
<html>
<head>
<title>Отключить ссылку с помощью CSS</title>
<style type="text/css">
.not-active {
    pointer-events: none;
    cursor: default;
}
</style>
</head>
<body>
    <a href="http://zornet.ru/forum/123-8005-1" class="not-active">Переход</a>
</body>
</html>

Здесь смотрится как ключевое слово, которое поставлено под ссылку, но перехода не случится.

HTML-код 2

Этот код показывает CSS, который применяется к тегу, где ссылка отключен, где свойство text-decoration также можно использовать.

Код

<!DOCTYPE html>
<html>
<head>
<title>Отключить ссылку с помощью CSS</title>
<style type="text/css">
.not-active {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
    color: black;
}
</style>
</head>
<body>
    <a href="http://zornet.ru/forum/123-3678-1" class="not-active">Кликните сюда</a>
</body>
</html>

Здесь видно, что ссылка исчезла, где вместо ее появилась совершенна другая структура ссылки.

Страна: (RU)