Скрытие ссылки с помощью CSS может быть сделано несколькими способами, но мы рассмотрим два метода, в которых URL может быть полностью скрыт от просмотра. Если вы хотите создать на своем сайте охоту за мусором или пасхальное яйцо, это интересный способ скрыть ссылки.
Первый способ заключается в использовании «нет» в качестве
pointer-events
Значение свойства CSS. Другой способ – просто закрасить текст, чтобы он соответствовал фону страницы.
Ни один из методов не скрывает ссылку, если кто-то проверяет исходный код HTML. Однако у посетителей не будет простого и понятного способа его увидеть, а у ваших начинающих посетителей не будет понятия, как найти ссылку.
Отключить событие указателя
Первый способ, который мы можем использовать, чтобы скрыть URL, – заставить ссылку ничего не делать. Когда мышь наводит курсор на ссылку, она не показывает, на что указывает URL, и не позволяет щелкнуть ее.
Напишите HTML правильно
На одной веб-странице убедитесь, что гиперссылка выглядит следующим образом:
Lifewire.com
Конечно, “https://www.lifewire.com/” необходимо указать фактический URL, который вы хотите скрыть, и Lifewire.com можно изменить на любой слово или фраза, которая вам нравится, которая описывает ссылку.
Идея в том, что класс
active
будет использоваться с перечисленным ниже CSS, чтобы эффективно скрывать ссылку.
Используйте этот код CSS
Код CSS должен обращаться к классу active и объяснять браузеру, что событие после нажатия ссылки должно быть «none», например так:
.active {pointer-events: none;
курсор: по умолчанию;
}
Вы можете увидеть этот метод в действии на JSFiddle. Если вы удалите код CSS, а затем повторно запустите данные, ссылка внезапно станет активной и пригодной для использования. Это потому, что когда CSS не применяется, ссылка ведет себя нормально.
Если пользователь просматривает исходный код страницы, он увидит ссылку и точно знает, куда она идет, потому что, как мы видим выше, код все еще там, он просто не может быть использован.
Изменить цвет ссылки
Обычно веб-дизайнер создает гиперссылки, отличающиеся от фона, чтобы посетители могли их видеть и знать, куда они идут. Однако мы здесь, чтобы скрыть ссылки , поэтому давайте посмотрим, как изменить цвет, чтобы он соответствовал цвету страницы.
Определить пользовательский класс
Если мы используем тот же пример из первого метода, описанного выше, мы можем просто изменить класс на любой другой, чтобы скрыть только специальные ссылки.
Если бы мы не использовали класс и вместо этого применили CSS снизу к каждой ссылке, все они исчезли бы. Это не то, что нам нужно, поэтому мы будем использовать этот HTML-код, который использует специальный класс hideme :
Lifewire.com
Узнайте, какой цвет использовать
Прежде чем вводить соответствующий код CSS, чтобы скрыть ссылку, нам нужно выяснить, какой цвет мы хотим использовать. Если у вас уже есть сплошной фон, например белый или черный, то это легко. Тем не менее, другие специальные цвета тоже должны быть точными.
Например, если у вашего цвета фона есть шестнадцатеричное значение e6ded1 , вам нужно знать это для правильной работы кода CSS.
Доступно множество инструментов «Выбор цвета» или «Пипетка», один из которых называется «Пипетка ColorPick» для браузера Chrome. Используйте его для определения цвета фона вашей веб-страницы, чтобы получить шестнадцатеричный цвет.
Настройте CSS, чтобы изменить цвет
Теперь, когда у вас есть цвет, которым должна быть ссылка, пришло время использовать его и значение пользовательского класса сверху, чтобы написать код CSS:
.hideme {
color: # e6ded1;
}
Если ваш фоновый цвет простой, например белый или зеленый, вам не нужно ставить знак # перед ним:
.hideme {
цвет: белый;
}
Посмотрите пример кода этого метода в этом JSFiddle.
