CSS ਵਰਤਦੇ ਹੋਏ ਲਿੰਕ ਨੂੰ ਕਿਵੇਂ ਲੁਕਾਉ

CSS ਨਾਲ ਲਿੰਕ ਨੂੰ ਲੁਕਾਉਣ ਨਾਲ ਕਈ ਤਰੀਕਿਆਂ ਨਾਲ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ, ਪਰ ਅਸੀਂ ਦੋ ਤਰੀਕਿਆਂ ਵੱਲ ਧਿਆਨ ਦੇਵਾਂਗੇ ਜਿਸ ਵਿੱਚ ਇੱਕ URL ਵਿਊ ਤੋਂ ਪੂਰੀ ਤਰ੍ਹਾਂ ਲੁਕਿਆ ਹੋ ਸਕਦਾ ਹੈ. ਜੇ ਤੁਸੀਂ ਆਪਣੀ ਸਾਈਟ 'ਤੇ ਸਕੈਜਗਾਰ ਭਾਲ ਜਾਂ ਈਸਟਰ ਅੰਡੇ ਬਣਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ ਤਾਂ ਇਹ ਲਿੰਕ ਨੂੰ ਲੁਕਾਉਣ ਦਾ ਇਕ ਦਿਲਚਸਪ ਤਰੀਕਾ ਹੈ.

ਪਹਿਲਾ ਤਰੀਕਾ ਹੈ "ਕੋਈ ਨਹੀਂ" ਜਿਵੇਂ ਕਿ ਪੁਆਇੰਟਰ-ਈਵੈਂਟ CSS ਪ੍ਰੌਪਰਟੀ ਵੈਲਯੂ. ਦੂਜਾ, ਸਫ਼ੇ ਦੇ ਪਿਛੋਕੜ ਨਾਲ ਮੇਲ ਕਰਨ ਲਈ ਸਿਰਫ਼ ਪਾਠ ਨੂੰ ਰੰਗਤ ਕਰਨਾ ਹੈ.

ਇਹ ਗੱਲ ਧਿਆਨ ਵਿੱਚ ਰੱਖੋ ਕਿ ਸਰੋਤ ਕੋਡ ਦੀ ਖੋਜ ਕਰਨ ਵੇਲੇ ਕੋਈ ਵੀ ਤਰੀਕਾ ਲੱਭਣ ਤੋਂ ਪੂਰੀ ਤਰਾਂ ਗਾਇਬ ਹੋ ਜਾਵੇਗਾ. ਪਰ, ਸੈਲਾਨੀਆਂ ਕੋਲ ਇਸ ਨੂੰ ਵੇਖਣ ਲਈ ਇੱਕ ਸਧਾਰਨ, ਸਿੱਧਾ ਤਰੀਕਾ ਨਹੀਂ ਹੋਵੇਗਾ, ਅਤੇ ਤੁਹਾਡੇ ਨਵੇਂ ਸੈਲਾਨੀਆਂ ਨੂੰ ਇਹ ਨਹੀਂ ਪਤਾ ਹੋਵੇਗਾ ਕਿ ਲਿੰਕ ਕਿਵੇਂ ਲੱਭਣਾ ਹੈ.

ਨੋਟ: ਜੇ ਤੁਸੀਂ ਇੱਕ ਬਾਹਰੀ ਸਟਾਈਲ ਸ਼ੀਟ ਨੂੰ ਕਿਵੇਂ ਲਿੰਕ ਕਰਨਾ ਹੈ, ਇਸ ਬਾਰੇ ਨਿਰਦੇਸ਼ਾਂ ਦੀ ਤਲਾਸ਼ ਕਰ ਰਹੇ ਹੋ, ਇਹ ਨਿਰਦੇਸ਼ ਉਹ ਨਹੀਂ ਹਨ ਜੋ ਤੁਸੀਂ ਬਾਅਦ ਵਿੱਚ ਹੋ ਵੇਖੋ ਇੱਕ ਬਾਹਰੀ ਸਟਾਈਲ ਸ਼ੀਟ ਕੀ ਹੈ? ਇਸਦੀ ਬਜਾਏ

ਪੁਆਇੰਟਰ ਇਵੈਂਟ ਨੂੰ ਅਸਮਰੱਥ ਬਣਾਓ

ਇੱਕ URL ਨੂੰ ਲੁਕਾਉਣ ਲਈ ਅਸੀਂ ਪਹਿਲੀ ਤਰੀਕਾ ਵਰਤ ਸਕਦੇ ਹਾਂ ਕਿ ਲਿੰਕ ਨੂੰ ਕੁਝ ਨਾ ਕਰੋ. ਜਦੋਂ ਲਿੰਕ ਉੱਤੇ ਮਾਊਸ ਫੜਦਾ ਹੈ, ਤਾਂ ਇਹ ਨਹੀਂ ਦਿਖਾਏਗਾ ਕਿ URL ਕੀ ਦਰਸਾਉਂਦਾ ਹੈ ਅਤੇ ਇਹ ਤੁਹਾਨੂੰ ਇਸ ਤੇ ਕਲਿਕ ਨਹੀਂ ਕਰਨ ਦੇਵੇਗਾ.

ਸਹੀ ਤਰ੍ਹਾਂ HTML ਲਿਖੋ

ਇਕ ਵੈਬ ਪੇਜ, ਇਹ ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਹਾਇਪਰਲਿੰਕ ਇਸ ਤਰ੍ਹਾਂ ਪੜ੍ਹਦਾ ਹੈ:

ਥਾਟਕਾਓ. com

ਬੇਸ਼ਕ, "https://www.thoughtco.com/" ਨੂੰ ਅਸਲ URL ਤੇ ਸੰਕੇਤ ਦੇਣ ਦੀ ਜ਼ਰੂਰਤ ਹੈ ਜੋ ਤੁਸੀਂ ਲੁਕਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਅਤੇ ਥਾਟਕਾਓ ਡਾਉਨਲੋਡ ਨੂੰ ਕਿਸੇ ਵੀ ਸ਼ਬਦ ਜਾਂ ਵਾਕ ਵਿੱਚ ਤਬਦੀਲ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ ਜੋ ਲਿੰਕ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ.

ਇੱਥੇ ਇਹ ਵਿਚਾਰ ਇਹ ਹੈ ਕਿ ਕਲਾਸ ਨੂੰ ਕਿਰਿਆਸ਼ੀਲ ਲਿੰਕ ਨੂੰ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਤਰੀਕੇ ਨਾਲ ਛੁਪਾਉਣ ਲਈ CSS ਹੇਠ ਵਰਤਿਆ ਜਾਵੇਗਾ.

ਇਸ CSS ਕੋਡ ਦੀ ਵਰਤੋਂ ਕਰੋ

CSS ਕੋਡ ਨੂੰ ਐਕਟਿਵ ਕਲਾਸ ਨੂੰ ਸੰਬੋਧਿਤ ਕਰਨ ਦੀ ਅਤੇ ਬਰਾਊਜ਼ਰ ਨੂੰ ਸਮਝਾਉਣ ਦੀ ਜ਼ਰੂਰਤ ਹੈ ਕਿ ਲਿੰਕ ਤੇ ਕਲਿਕ ਹੋਣ ਤੇ "ਕੋਈ ਨਹੀਂ", ਇਸ ਤਰਾਂ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ:

. ਐਕਟਿਵ {ਪੁਆਇੰਟਰ-ਈਵੈਂਟ: ਕੋਈ ਨਹੀਂ; ਕਰਸਰ: ਡਿਫੌਲਟ; }

ਤੁਸੀਂ JSFiddle ਤੇ ਇਸ ਵਿਧੀ ਨੂੰ ਕਾਰਵਾਈ ਵਿੱਚ ਵੇਖ ਸਕਦੇ ਹੋ. ਜੇ ਤੁਸੀਂ ਉੱਥੇ ਸੀਐਸਐਸ ਕੋਡ ਨੂੰ ਹਟਾਉਂਦੇ ਹੋ, ਅਤੇ ਫਿਰ ਡੇਟਾ ਮੁੜ ਚਲਾਓ ਤਾਂ ਇਹ ਲਿੰਕ ਅਚਾਨਕ ਹੀ ਕਲਿੱਕਯੋਗ ਅਤੇ ਉਪਯੋਗੀ ਬਣ ਜਾਂਦਾ ਹੈ. ਇਹ ਇਸ ਕਰਕੇ ਹੈ ਕਿ ਜਦੋਂ CSS ਲਾਗੂ ਨਹੀਂ ਹੁੰਦਾ, ਲਿੰਕ ਆਮ ਤੌਰ ਤੇ ਕੰਮ ਕਰਦਾ ਹੈ.

ਨੋਟ ਕਰੋ: ਯਾਦ ਰੱਖੋ ਕਿ ਜੇ ਯੂਜ਼ਰ ਸਫੇ ਦੇ ਸਰੋਤ ਕੋਡ ਨੂੰ ਵੇਖਦਾ ਹੈ, ਤਾਂ ਉਹ ਲਿੰਕ ਨੂੰ ਵੇਖਣਗੇ ਅਤੇ ਜਾਣਦੇ ਹਨ ਕਿ ਇਹ ਕਿੱਥੇ ਜਾਂਦਾ ਹੈ ਕਿਉਂਕਿ ਜਿਵੇਂ ਅਸੀਂ ਉਪਰ ਵੇਖਦੇ ਹਾਂ, ਕੋਡ ਅਜੇ ਵੀ ਹੈ, ਇਹ ਵਰਤੋਂ ਯੋਗ ਨਹੀਂ ਹੈ.

ਲਿੰਕ ਦੇ ਰੰਗ ਨੂੰ ਬਦਲੋ

ਆਮ ਤੌਰ 'ਤੇ, ਇੱਕ ਵੈਬ ਡਿਜ਼ਾਇਨਰ ਹਾਈਪਰਲਿੰਕ ਨੂੰ ਬੈਕਗ੍ਰਾਉਂਡ ਨਾਲੋਂ ਇੱਕ ਵੱਖਰੇ ਰੰਗ ਬਣਾ ਦੇਵੇਗਾ ਤਾਂ ਜੋ ਦਰਸ਼ਕ ਅਸਲ ਵਿੱਚ ਉਹਨਾਂ ਨੂੰ ਵੇਖ ਸਕਣ ਅਤੇ ਜਾਣ ਸਕਣ ਕਿ ਉਹ ਕਿੱਥੇ ਜਾਂਦੇ ਹਨ. ਹਾਲਾਂਕਿ, ਅਸੀਂ ਇੱਥੇ ਲਿੰਕ ਨੂੰ ਲੁਕਾਉਣ ਲਈ ਹਾਂ, ਇਸ ਲਈ ਆਓ ਵੇਖੀਏ ਕਿ ਸਫ਼ੇ ਦੇ ਨਾਲ ਮੇਲਣ ਲਈ ਰੰਗ ਕਿਵੇਂ ਬਦਲਣਾ ਹੈ.

ਇੱਕ ਕਸਟਮ ਕਲਾਸ ਪਰਿਭਾਸ਼ਿਤ ਕਰੋ

ਜੇ ਅਸੀਂ ਉਪਰੋਕਤ ਪਹਿਲੇ ਵਿਧੀ ਤੋਂ ਇਕੋ ਜਿਹੀ ਉਦਾਹਰਨ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ, ਤਾਂ ਅਸੀਂ ਆਪਣੀ ਕਲਾਸ ਨੂੰ ਜੋ ਕੁਝ ਵੀ ਮੰਗਦੇ ਹਾਂ ਉਹ ਬਸ ਬਦਲ ਸਕਦੇ ਹਾਂ ਤਾਂ ਕਿ ਸਿਰਫ਼ ਵਿਸ਼ੇਸ਼ ਲਿੰਕਸ ਲੁਕਾਏ ਜਾ ਸਕਣ.

ਜੇ ਅਸੀਂ ਕਿਸੇ ਕਲਾਸ ਦੀ ਵਰਤੋਂ ਨਹੀਂ ਕੀਤੀ ਹੈ ਅਤੇ ਇਸ ਦੀ ਬਜਾਏ ਹੇਠਲੇ ਲਿੰਕ ਤੋਂ CSS ਨੂੰ ਹਰ ਲਿੰਕ ਤੇ ਲਾਗੂ ਕੀਤਾ ਹੈ, ਤਾਂ ਉਹ ਸਾਰੇ ਅਲੋਪ ਹੋ ਜਾਣਗੇ. ਇਹ ਉਹ ਨਹੀਂ ਹੈ ਜੋ ਅਸੀਂ ਇੱਥੇ ਦੇ ਬਾਅਦ ਹੋਏ ਹਾਂ, ਇਸ ਲਈ ਅਸੀਂ ਇਸ ਐਚਟੀਐਮਐਲ ਕੋਡ ਦੀ ਵਰਤੋਂ ਕਰਾਂਗੇ ਜੋ ਕਸਟਮ ਹਾਇਡੀਮ ਕਲਾਸ ਦੀ ਵਰਤੋਂ ਕਰ ਰਿਹਾ ਹੈ:

ਥਾਟਕੋ ਡੋਮੇਨ

ਪਤਾ ਕਰੋ ਕਿ ਕਿਹੜਾ ਰੰਗ ਵਰਤਣਾ ਹੈ

ਅਸੀਂ ਲਿੰਕ ਨੂੰ ਲੁਕਾਉਣ ਲਈ ਉਚਿਤ CSS ਕੋਡ ਦਾਖਲ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ, ਸਾਨੂੰ ਪਤਾ ਲਗਾਉਣ ਦੀ ਲੋੜ ਹੈ ਕਿ ਅਸੀਂ ਕਿਹੜਾ ਰੰਗ ਵਰਤਣਾ ਚਾਹੁੰਦੇ ਹਾਂ. ਜੇ ਤੁਹਾਡੇ ਕੋਲ ਪਹਿਲਾਂ ਹੀ ਇਕ ਠੋਸ ਪਿੱਠਭੂਮੀ ਹੈ, ਜਿਵੇਂ ਕਿ ਚਿੱਟਾ ਜਾਂ ਕਾਲਾ, ਤਾਂ ਇਹ ਆਸਾਨ ਹੈ. ਹਾਲਾਂਕਿ, ਹੋਰ ਵਿਸ਼ੇਸ਼ ਰੰਗਾਂ ਨੂੰ ਵੀ ਸਹੀ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ.

ਉਦਾਹਰਣ ਦੇ ਲਈ, ਜੇ ਤੁਹਾਡੇ ਪਿਛੋਕੜ ਰੰਗ ਵਿੱਚ e6ded1 ਦਾ ਹੈਕਸ ਮੁੱਲ ਹੈ, ਤਾਂ ਤੁਹਾਨੂੰ ਇਹ ਜਾਣਨ ਦੀ ਜ਼ਰੂਰਤ ਹੈ ਕਿ CSS ਕੋਡ ਨੂੰ ਉਸ ਪੰਨੇ ਲਈ ਠੀਕ ਢੰਗ ਨਾਲ ਕੰਮ ਕਰਨ ਲਈ ਕਿ ਤੁਸੀਂ ਇਸ ਵਿੱਚ ਗਾਇਬ ਹੋ ਰਹੇ ਹੋ.

ਇਨ੍ਹਾਂ "ਰੰਗ ਚੋਣਕਾਰ" ਜਾਂ "ਆਈਡਰਪਪਰ" ਸੰਦਾਂ ਦੇ ਬਹੁਤ ਸਾਰੇ ਉਪਲਬਧ ਹਨ, ਜਿਨ੍ਹਾਂ ਵਿੱਚੋਂ ਇੱਕ ਨੂੰ Chrome Browser ਲਈ ColorPick Eyedropper ਕਿਹਾ ਜਾਂਦਾ ਹੈ. ਹੈਕਸ ਰੰਗ ਲੈਣ ਲਈ ਇਸਨੂੰ ਆਪਣੇ ਵੈਬ ਪੇਜ ਦੇ ਬੈਕਗਰਾਊਂਡ ਰੰਗ ਦਾ ਨਮੂਨਾ ਦੇਣ ਲਈ ਵਰਤੋ.

ਰੰਗ ਬਦਲਣ ਲਈ CSS ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰੋ

ਹੁਣ ਤੁਹਾਡੇ ਕੋਲ ਉਹ ਲਿੰਕ ਹੈ ਜੋ ਕਿ ਲਿੰਕ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ, ਇਸਦਾ ਉਪਯੋਗ ਕਰਨ ਦਾ ਸਮਾਂ ਹੈ ਅਤੇ ਉਪਰੋਕਤ ਤੋਂ ਕਸਟਮ ਕਲਾਸ ਦੇ ਮੁੱਲ, CSS ਕੋਡ ਲਿਖਣ ਲਈ:

.hideme {color: # e6ded1; }

ਜੇ ਤੁਹਾਡਾ ਪਿਛੋਕੜ ਰੰਗ ਸਫੈਦ ਜਾਂ ਹਰਾ ਜਿਹਾ ਸਾਦਾ ਹੈ, ਤਾਂ ਤੁਹਾਨੂੰ ਉਸ ਤੋਂ ਪਹਿਲਾਂ # ਚਿੰਨ੍ਹ ਲਗਾਉਣ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ:

.hideme {color: white; }

ਇਸ ਵਿਧੀ ਦਾ ਨਮੂਨਾ ਕੋਡ ਇਸ JSFiddle ਵਿੱਚ ਵੇਖੋ.