• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Отключить ссылку перехода с помощью CSS (Блокировка ссылок переходов, которая работает при помощи CSS)
Отключить ссылку перехода с помощью CSS
Kosten
Дата: Воскресенье, 2019-04-07, 23:56 | Сообщение 1
Оффлайн
Администраторы
Сообщений:24946
Награды: 57


Чтобы отключить ссылку с помощью 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)
Kosten
Дата: Понедельник, 2019-04-08, 00:03 | Сообщение 2
Оффлайн
Администраторы
Сообщений:24946
Награды: 57


При использование библиотеки jQuery.

Код
$('a.current-page').click(function() { return false; });


Также есть тема, что полностью скрыть.

HTML

Код
<a href="#" class="sagunepod">Ссылка</a>


CSS

Код
.sagunepod {
        pointer-events: none;
        cursor: default;
        opacity: 0.6;
    }
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Отключить ссылку перехода с помощью CSS (Блокировка ссылок переходов, которая работает при помощи CSS)
  • Страница 1 из 1
  • 1
Поиск: