Om 'n skakel met CSS te verberg, kan op verskeie maniere gedoen word, maar ons kyk na twee metodes waar 'n URL heeltemal van die vertoning versteek kan word. As jy 'n scavenger-jag of paaseier op jou werf wil skep, is dit 'n interessante manier om skakels te versteek.
Die eerste manier is om "geen" as die waarde van die aanwyser-gebeurtenisse CSS te gebruik. Die ander is deur bloot die teks te kleur om die agtergrond van die bladsy te pas.
Hou in gedagte dat geen metode die skakel heeltemal sal verdwyn om gevind te word wanneer u die bronkode soek. Besoekers sal egter nie 'n eenvoudige, maklike manier hê om dit te sien nie, en jou beginnersbesoekers sal nie 'n idee hê hoe om die skakel te vind nie.
Nota: as u opdragte raadpleeg oor hoe om 'n eksterne stylblad te koppel, is hierdie instruksies nie wat u soek nie. Kyk wat 'n eksterne stylblad? plaas.
Deaktiveer die wyser gebeurtenis
Die eerste metode wat ons kan gebruik om 'n URL te verberg, is om die skakel niks te doen nie. As die muis oor die skakel hang, sal dit nie wys wat die URL wys nie en dit sal jou nie toelaat om dit te klik nie.
Skryf die HTML korrek
Een op die webblad, maak seker dat die hiperskakel soos volg lees:
ThoughtCo.comNatuurlik, "https://www.thoughtco.com/" moet verwys na die werklike URL wat jy wil versteek, en ThoughtCo.com kan verander word na enige woord of frase wat jy so beskryf wat die skakel beskryf.
Die idee hier is dat die klas aktief met die CSS hieronder gebruik sal word om die skakel effektief te verberg.
Gebruik hierdie CSS-kode
Die CSS-kode moet die aktiewe klas aanspreek en verduidelik aan die blaaier dat die gebeurtenis op die skakel klik, "niemand" moet wees soos volg:
Aktiewe {wyser-gebeure: geen; wyser: standaard; }Jy kan hierdie metode in aksie oor by JSFiddle sien. As jy die CSS-kode daar verwyder, en dan die data herhaal, word die skakel skielik kliekbaar en bruikbaar. Dit is omdat wanneer die CSS nie toegepas word nie, die skakel gewoonlik gedra.
Nota: Onthou dat as die gebruiker die bronkode van die bladsy sien, sien hulle die skakel en weet presies waar dit gaan, want soos ons hierbo sien, is die kode nog steeds daar, dit is net nie bruikbaar nie.
Verander die skakel se kleur
Normaalweg sal 'n webontwerper hiperskakels 'n ander kleur as die agtergrond maak sodat besoekers hulle eintlik kan sien en weet waarheen hulle gaan. Ons is egter hier om skakels weg te steek , dus kom ons kyk hoe om die kleur te verander om by die bladsy te pas.
Definieer 'n aangepaste klas
As ons dieselfde voorbeeld gebruik van die eerste metode hierbo, kan ons die klas eenvoudig verander na wat ons wil, sodat net spesiale skakels verborge is.
As ons nie 'n klas gebruik het nie en die CSS van onder af na elke skakel toegepas het, sou almal van hulle verdwyn. Dit is nie wat ons hierna volg nie, so ons sal hierdie HTML-kode gebruik wat die persoonlike Hideme-klas gebruik:
ThoughtCo.comVind uit watter kleur om te gebruik
Voordat ons die toepaslike CSS-kode invoer om die skakel weg te steek, moet ons uitvind watter kleur ons wil gebruik. As jy reeds 'n stewige agtergrond het, soos wit of swart, dan is dit maklik. Ander spesiale kleure moet egter ook presies wees.
As u agtergrondkleur byvoorbeeld 'n hex-waarde van e6ded1 het , moet u weet dat die CSS-kode behoorlik werk vir die bladsy waarin u dit wil verdwyn.
Daar is baie van hierdie "color picker" of "eyedropper" gereedskap beskikbaar, waarvan een bekend staan as ColorPick Eyedropper vir die Chrome-blaaier. Gebruik dit om die agtergrondkleur van jou webblad te probeer kry om die heks-kleur te kry.
Pas die CSS aan om die kleur te verander
Noudat jy die kleur het wat die skakel moet wees, is dit tyd om dit en die gebruiklike klaswaarde van bo te gebruik om die CSS-kode te skryf:
.hideme {kleur: # e6ded1; }As jou agtergrondkleur eenvoudig soos wit of groen is, hoef jy die # -teken nie voor dit te plaas nie:
.hideme {kleur: wit; }Sien hierdie metode se voorbeeldkode in hierdie JSFiddle.