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