Ocultar um link com CSS pode ser feito de várias maneiras, mas veremos dois métodos nos quais uma URL pode ser completamente oculta da visualização. Se você deseja criar uma caça ao tesouro ou ovo de páscoa em seu site, esta é uma maneira interessante de ocultar links. A primeira maneira é usando Nenhum Enquanto o eventos de ponteiro Valor da propriedade CSS. A outra é simplesmente colorir o texto para combinar com o fundo da página. Nenhum método oculta o link se alguém inspecionar o código-fonte HTML. No entanto, os visitantes não terão uma maneira simples e direta de vê-lo, e os visitantes novatos não terão a menor ideia de como encontrar o link.
Desativar o evento de ponteiro
O primeiro método que podemos usar para ocultar um URL é fazer com que o link não faça nada. Quando o mouse passa sobre o link, ele não mostra para o que o URL aponta e não permite que você clique nele.
Escreva o HTML corretamente
Na página da web, certifique-se de que o hiperlink seja assim: fiodevida.com
class = “ql-syntax”> Claro, “https://www.fiodevida.com/” precisa apontar para o URL real que você deseja ocultar e fiodevida.com pode ser alterado para qualquer palavra ou frase que descreva o link. A ideia aqui é que a classe ativo será usado com o CSS listado abaixo para ocultar efetivamente o link.
Use este código CSS
O código CSS precisa abordar a classe ativa e explicar ao navegador que o evento após o clique no link deve ser Nenhum, assim: .active {
eventos de ponteiro: nenhum;
cursor: padrão;
}
class = “ql-syntax”> Você pode ver este método em ação no JSFiddle. Se você remover o código CSS e executar os dados novamente, o link repentinamente se tornará clicável e utilizável. Isso porque quando o CSS não é aplicado, o link se comporta normalmente. Se o usuário visualizar o código-fonte da página, ele verá o link e saberá exatamente para onde ele vai porque, como vimos acima, o código ainda está lá, simplesmente não pode ser usado.
Mudar a cor do link
Normalmente, um web designer fará hiperlinks com uma cor de fundo contrastante para que os visitantes possam vê-los e saber para onde vão. No entanto, estamos aqui para ocultar links, então vamos ver como alterar a cor para corresponder à da página.
Defina uma classe personalizada
Se usarmos o mesmo exemplo do primeiro método acima, podemos simplesmente alterar a classe para o que quisermos, de modo que apenas links especiais sejam ocultados. Se não usássemos uma classe e, em vez disso, aplicássemos o CSS de baixo para todos os links, todos eles desapareceriam. Não é isso que buscamos aqui, então usaremos este código HTML que está usando o me esconda classe: fiodevida.com
Descubra qual cor usar
Antes de inserirmos o código CSS apropriado para ocultar o link, precisamos descobrir a cor que queremos usar. Se você já tem um fundo sólido, como branco ou preto, isso é fácil. No entanto, outras cores especiais também precisam ser exatas. Por exemplo, se sua cor de fundo tem um valor hexadecimal de e6ded1, você precisa saber disso para que o código CSS funcione corretamente. Existem muitas dessas ferramentas de “seletor de cores” ou “conta-gotas” disponíveis, uma das quais é chamada de Conta-gotas ColorPick para o navegador Chrome. Use-o para obter uma amostra da cor de fundo de sua página da web para obter a cor hexadecimal.
Personalize o CSS para alterar a cor
Agora que você tem a cor que o link deve ter, é hora de usar isso e o valor da classe personalizada acima, para escrever o código CSS: .hideme {
color: # e6ded1;
}
Se sua cor de fundo for simples como branco ou verde, você não precisa colocar o sinal # antes dela: .hideme {
cor branca;
}
Veja o código de amostra deste método neste JSFiddle.
