CSS સાથે લિંકને છૂપાવવામાં ઘણી બધી રીતો થઈ શકે છે, પરંતુ અમે બે પદ્ધતિઓ જોશો જેમાં URL દૃશ્યથી સંપૂર્ણપણે છુપાયેલ હોઈ શકે છે. જો તમે તમારી સાઇટ પર સ્કેવેન્ગર હન્ટ અથવા ઇસ્ટર એંડ બનાવવા માંગો છો, તો આ લિંક્સને છુપાવવા માટેની એક રસપ્રદ રીત છે.
પ્રથમ રસ્તો એ "કંઈ નહીં" તરીકે નિર્દેશક-ઘટનાઓ સીએસએસ પ્રોપર્ટી વેલ્યુનો ઉપયોગ કરીને છે. બીજું, ફક્ત પૃષ્ઠની પૃષ્ઠભૂમિને મેચ કરવા માટે ટેક્સ્ટને રંગિત કરીને છે.
ધ્યાનમાં રાખો કે સ્ત્રોત કોડની શોધ કરતી વખતે નળી પદ્ધતિ મળી શકશે નહીં. જો કે, મુલાકાતીઓ પાસે તે જોવા માટે એક સરળ, સરળ રીત નહીં હોય, અને તમારા શિખાઉ મુલાકાતીઓ પાસે કડી કેવી રીતે શોધી શકાય તે ચાવી નથી.
નોંધ: જો તમે કોઈ બાહ્ય શૈલી પત્રકને કેવી રીતે લિંક કરવાના સૂચનો શોધી રહ્યા છો, તો આ સૂચનો તે પછી નથી કે તમે શું કરો છો જુઓ બાહ્ય સ્ટાઇલશીટ શું છે? તેના બદલે
પોઇન્ટર ઇવેન્ટને અક્ષમ કરો
યુઆરએલને છુપાવવા માટે આપણે ઉપયોગમાં લઈ શકીએ તે પહેલી પદ્ધતિ એ છે કે લિંકને કશું કરવાનું નથી. જ્યારે લિંક લિંક પર માઉસ ઝૂંટવી જાય છે, ત્યારે તે URL બતાવશે નહીં અને તે તમને તે ક્લિક કરવા દેશે નહીં.
યોગ્ય રીતે HTML લખો
એક વેબપેજ, ખાતરી કરો કે હાયપરલિંક આની જેમ વાંચે છે:
ThoughtCo.comઅલબત્ત, "https://www.thoughtco.com/" ને વાસ્તવિક URL પર સૂચિબદ્ધ કરવાની જરૂર છે જે તમે છુપાવી શકો છો, અને ThoughtCo.com એ કોઈપણ શબ્દ અથવા શબ્દસમૂહને બદલવામાં આવી શકે છે જે તમારી લિંકને વર્ણવે છે.
અહીં એવો વિચાર છે કે વર્ગ સક્રિય અસરકારક રીતે લિંક છુપાવવા માટે નીચે સીએસએસ સાથે ઉપયોગ કરવામાં આવશે.
આ સીએસએસ કોડનો ઉપયોગ કરો
CSS કોડને સક્રિય વર્ગને સંબોધિત કરવાની અને બ્રાઉઝરને સમજાવવાની જરૂર છે કે જે લિંક પરની ઇવેન્ટ ક્લિક કરે છે, તે "કોઈ નહીં", આના જેવું હોવું જોઈએ:
. સક્રિય {પોઇન્ટર-ઇવેન્ટ્સ: કંઈ નહીં; કર્સર: ડિફૉલ્ટ; }JSFiddle પર તમે આ પદ્ધતિ ક્રિયામાં જોઈ શકો છો. જો તમે ત્યાં સીએસએસ કોડને દૂર કરો છો, અને પછી ડેટાને ફરીથી ચલાવો છો, લિંક અચાનક ક્લિક કરી શકાય તેવા અને ઉપયોગી બને છે. આ કારણ છે કે જ્યારે સીએસએસ લાગુ પડતું નથી, લિંક સામાન્ય રૂપે વર્તન કરે છે
નોંધ: યાદ રાખો કે જો વપરાશકર્તા પૃષ્ઠના સ્રોત કોડને જુએ છે, તો તેઓ લિંકને જોશે અને જાણશે કે તે ક્યાં જાય છે કારણ કે જેમ આપણે ઉપર જોયું તેમ, કોડ હજી પણ ત્યાં છે, તે ફક્ત ઉપયોગી નથી
લિંકનો રંગ બદલો
સામાન્ય રીતે, વેબ ડિઝાઈનર હાયપરલિંક્સને પૃષ્ઠભૂમિ કરતાં અલગ રંગ બનાવશે જેથી મુલાકાતીઓ ખરેખર તેને જોઈ શકે અને તે ક્યાં જાય તે જાણી શકે. જો કે, અમે લિંક્સને છુપાવવા માટે અહીં છીએ, તેથી ચાલો જોઈએ કે પેજની મેચ કરવા રંગ કેવી રીતે બદલવો.
કસ્ટમ ક્લાસ વ્યાખ્યાયિત કરો
જો આપણે ઉપરોક્ત પ્રથમ પદ્ધતિમાંથી સમાન ઉદાહરણનો ઉપયોગ કરીએ છીએ, તો અમે ફક્ત વર્ગને બદલી શકીએ છીએ કે જેથી અમે ફક્ત ખાસ લિંક્સને છુપાવીએ.
જો આપણે કોઈ ક્લાસનો ઉપયોગ કર્યો નથી અને તેના બદલે નીચેથી દરેક લિંકને સીએસએસ લાગુ કર્યો છે, તો તે બધા જ અદૃશ્ય થઈ જશે. આ તે પછી નથી કે આપણે અહીં છીએ, તેથી અમે આ એચટીએમએલ કોડનો ઉપયોગ કરીશું જે કસ્ટમ એચડેમી ક્લાસનો ઉપયોગ કરી રહ્યો છે:
ThoughtCo.comશોધવા માટે રંગ શું છે
અમે લિંકને છુપાવવા માટે યોગ્ય CSS કોડ દાખલ કરીએ તે પહેલાં, અમારે આ કઇ રંગનો ઉપયોગ કરવો છે તે સમજવાની જરૂર છે. જો તમારી પાસે પહેલાથી ઘન પાશ્ર્વભાગ છે, જેમ કે સફેદ કે કાળો, તો તે સરળ છે. જો કે, અન્ય ખાસ રંગો ચોક્કસ પણ જરૂર છે.
ઉદાહરણ તરીકે, જો તમારી પૃષ્ઠભૂમિ રંગમાં e6ded1 નું હેક્સ મૂલ્ય છે, તો તમારે એ જાણવાની જરૂર છે કે CSS કોડને તે પૃષ્ઠ માટે યોગ્ય રીતે કામ કરવા માટે તમે તેને અદૃશ્ય થઈ ગયા છો.
આ "રંગ પીકર" અથવા "આઈડ્રોપર" ઉપલબ્ધ સાધનો પુષ્કળ છે, જેમાંથી એકને ક્રોમ બ્રાઉઝર માટે કોલરપેક આઇડ્રોપર કહેવામાં આવે છે. હેક્સ રંગ મેળવવા માટે તમારા વેબ પૃષ્ઠના પૃષ્ઠભૂમિ રંગનો નમૂનો આપવા માટે તેનો ઉપયોગ કરો.
રંગને બદલવા માટે CSS ને કસ્ટમાઇઝ કરો
હવે તમારી પાસે તે રંગ હોવું જોઈએ કે જે લિંક હોવી જોઈએ, તેનો ઉપયોગ કરવાનો સમય અને ઉપરથી કસ્ટમ વર્ગ મૂલ્ય, CSS કોડ લખવો.
.hideme {color: # e6ded1; }જો તમારો બેકગ્રાઉન્ડ રંગ સફેદ અથવા લીલો જેવા સરળ છે, તો તમારે તે પહેલાં # સાઇન મૂકવો પડશે નહીં:
.hideme {color: white; }આ પદ્ધતિના નમૂના કોડને આ JSFiddle માં જુઓ.