CSS ను ఉపయోగించి లింకులను దాచు ఎలా

CSS తో లింకును దాచడం అనేక రకాలుగా చేయబడుతుంది, కాని రెండు వ్యూహాలను చూద్దాం, దీనిలో ఒక URL ను పూర్తిగా చూడవచ్చు. మీరు మీ సైట్లో ఒక స్కావెంజర్ హంట్ లేదా ఈస్టర్ గుడ్డును సృష్టించాలనుకుంటే, ఇది లింకులు దాచడానికి ఒక ఆసక్తికరమైన మార్గం.

మొదటి మార్గం పాయింటర్-ఈవెంట్స్ CSS ఆస్తి విలువ "ఏదీ" ఉపయోగించడం. మరొకదాని పేజీ యొక్క నేపథ్యాన్ని సరిగ్గా సరిపోయేలా టెక్స్ట్ను ఉపయోగించడం ద్వారా ఉంటుంది.

సోర్స్ కోడ్ను శోధిస్తున్నప్పుడు ఏ పద్ధతినైనా లింక్ పూర్తిగా కనిపించకుండా పోతుంది అని గుర్తుంచుకోండి. అయితే, సందర్శకులు దీనిని చూడడానికి సులభమైన, సూటిగా ఉన్న మార్గాన్ని కలిగి ఉండరు, మరియు మీ అనుభవం లేని సందర్శకులు లింక్ను ఎలా కనుగొంటారు అనే విషయాన్ని కలిగి ఉండదు.

గమనిక: మీరు ఒక బాహ్య శైలి షీట్ను ఎలా లింక్ చేయాలనే దానిపై సూచనల కోసం చూస్తున్నట్లయితే, ఈ సూచనలు మీరు తర్వాత ఏమి కావు. బాహ్య శైలి షీట్ ఏమిటి? బదులుగా.

పాయింటర్ ఈవెంట్ని ఆపివేయి

లింక్ను ఏమీ చేయకుండా చేయడానికి ఒక URL ను దాచడానికి మేము ఉపయోగించే మొదటి పద్ధతి. లింక్పై మౌస్ hovers ఉన్నప్పుడు, ఇది URL పాయింట్స్ ఏమి చూపించదు మరియు మీరు దానిని క్లిక్ చెయ్యనివ్వరు.

సరిగ్గా HTML వ్రాయండి

ఒక వెబ్ పేజీ, హైపర్లింక్ ఇలా చదువుతుంది:

ThoughtCo.com

వాస్తవానికి, "https://www.thoughtco.com/" మీరు దాచాలనుకుంటున్న అసలు URL ను సూచించాల్సిన అవసరం ఉంది, మరియు ThoughtCo.com మీరు లింక్ను వివరించే ఏ పదం లేదా పదబంధానికి మార్చబడవచ్చు.

ఇక్కడ ఆలోచన తరగతి చురుకుగా లింక్ దాచడానికి క్రింద CSS తో ఉపయోగించబడుతుంది.

ఈ CSS కోడ్ ఉపయోగించండి

CSS కోడ్ చురుకుగా తరగతి పరిష్కరించేందుకు మరియు లింక్పై ఈవెంట్ క్లిక్, ఈ వంటి "none," ఉండాలి బ్రౌజర్ వివరించడానికి అవసరం:

.active {పాయింటర్-సంఘటనలు: none; కర్సర్: డిఫాల్ట్; }

మీరు JSFiddle వద్ద ఈ పద్ధతిని చూడవచ్చు. మీరు అక్కడ CSS కోడ్ను తీసివేసి, ఆపై డేటాను మళ్లీ ఆపివేస్తే, లింక్ అకస్మాత్తుగా క్లిక్ చేయదగినది మరియు ఉపయోగింపదగినది అవుతుంది. ఎందుకంటే CSS వర్తించబడకపోతే, లింక్ సాధారణముగా ప్రవర్తిస్తుంది.

గమనిక: వినియోగదారు పేజీ యొక్క సోర్స్ కోడ్ను చూస్తే, వారు లింక్ను చూస్తారు మరియు అది ఎక్కడికి వెళుతుందో ఖచ్చితంగా తెలుస్తుంది, ఎందుకంటే మనం పైన చూస్తున్నట్లుగా, కోడ్ ఇప్పటికీ ఉంది, ఇది కేవలం ఉపయోగం కాదు.

లింక్ యొక్క రంగు మార్చండి

సాధారణంగా, ఒక వెబ్ డిజైనర్ బ్యాక్గ్రౌండ్ కంటే హైపర్ లింక్లను చేస్తుంది, అందువల్ల సందర్శకులు వాటిని చూడవచ్చు మరియు వారు ఎక్కడికి వెళ్తున్నారో తెలుస్తుంది. అయితే, మేము లింక్లను దాచడానికి ఇక్కడ ఉన్నాము, కాబట్టి పేజీ యొక్క రంగుకు రంగును ఎలా మార్చాలో చూద్దాం.

ఒక కస్టమ్ క్లాస్ నిర్వచించండి

మనము పైన ఉన్న మొదటి పద్ధతి నుండి ఇదే ఉదాహరణని వాడుతుంటే, మనము కోరుకున్న వాటికి మాత్రమే ప్రత్యేకమైన లింకులను మాత్రమే దాచగలము.

మేము ఒక తరగతిని ఉపయోగించకపోతే మరియు ప్రతి లింకుకు క్రింద నుండి CSS ను అన్వయించి ఉంటే, అప్పుడు అవి అన్నింటినీ అదృశ్యమౌతాయి. అది మేము ఇక్కడ తర్వాత ఏమి కాదు, కాబట్టి మేము ఈ HTML కోడ్ను ఉపయోగిస్తాము, ఇది కస్టమ్ Hideme తరగతిని ఉపయోగిస్తుంది:

ThoughtCo.com

ఏ రంగు ఉపయోగించాలో కనుగొనండి

మేము లింక్ను దాచడానికి సముచితమైన CSS కోడ్ను నమోదు చేయడానికి ముందు, మనం ఉపయోగించాలనుకుంటున్న రంగును గుర్తించాల్సిన అవసరం ఉంది. మీరు ఇప్పటికే గట్టి నేపథ్యాన్ని కలిగి ఉంటే, తెలుపు లేదా నలుపు వంటి, అప్పుడు సులభం. అయితే, ఇతర ప్రత్యేక రంగులు ఖచ్చితమైన ఉండాలి.

ఉదాహరణకు, మీ నేపథ్యం రంగు e6ded1 యొక్క హెక్స్ విలువను కలిగి ఉంటే , CSS కోడ్ మీకు సరిగ్గా పనిచేయకపోయినా అది అదృశ్యం కావాలని కోరుకుంటుంది.

అందుబాటులో ఉన్న ఈ "రంగు పికర్స్" లేదా "కంటివేపాక" టూల్స్ పుష్కలంగా ఉన్నాయి, వీటిలో ఒకటి క్రోమ్ బ్రౌజర్ కోసం ColorPick Eyedropper అని పిలువబడుతుంది. హెక్స్ రంగు పొందడానికి మీ వెబ్ పేజీ యొక్క నేపథ్య రంగును నమూనాగా ఉపయోగించుకోండి.

రంగును మార్చడానికి CSS ను అనుకూలీకరించండి

ఇప్పుడు మీరు లింక్ను కలిగి ఉన్న రంగును కలిగి ఉంటాము, ఇది CSS కోడ్ను వ్రాయడానికి పైన మరియు దాని నుండి అనుకూల తరగతి విలువను ఉపయోగించడం సమయం ఆసన్నమైంది:

.hideme {color: # e6ded1; }

మీ నేపథ్య రంగు తెలుపు లేదా ఆకుపచ్చ వంటి సరళంగా ఉంటే, మీరు ముందు # గుర్తుని ఉంచకూడదు:

.hideme {రంగు: తెలుపు; }

JSFiddle ఈ పద్ధతి యొక్క నమూనా కోడ్ చూడండి.