پنهان کردن لینک با CSS می تواند چندین روش انجام شود، اما ما به دو روش که در آن URL را می توان به طور کامل از نظر پنهان نگاه کنید. اگر شما می خواهید یک شکار معیوب یا تخم مرغ عید پاک را در سایت خود ایجاد کنید، این یک راه جالب برای مخفی کردن پیوندها است.
اولین راه استفاده از "none" به عنوان رویداد رویداد رویداد CSS property value است. دیگر این است که به سادگی رنگ متن را برای مطابقت با پس زمینه صفحه.
به یاد داشته باشید که هیچ روش این پیوند را از جستجو در کد منبع ناپدید نخواهد کرد. با این حال، بازدیدکنندگان روش ساده و ساده ای برای دیدن آن نخواهند داشت و بازدید کنندگان تازه کار شما نخواهند دید که چگونه پیوند را پیدا کنید.
توجه: اگر به دنبال دستورالعمل هایی درباره نحوه پیوند ورق سبک خارجی هستید، این دستورالعمل ها چیزی نیست که بعد از آن هستید. چه خبرنامه سبک خارجی را ببینید ؟ بجای.
رویداد Pointer را غیرفعال کنید
اولین روشی که ما میتوانیم برای مخفی کردن یک URL استفاده کنیم این است که لینک را هیچ کاری انجام ندهد. هنگامی که ماوس بر روی لینک قرار می گیرد، نشان داده نمی شود که URL به آن اشاره می کند و اجازه نمی دهد روی آن کلیک کنید.
HTML را به درستی بنویسید
یکی از صفحات وب، مطمئن شوید که لینک به این شکل است:
ThoughtCo.comالبته، "https://www.thoughtco.com/" نیاز به اشاره به URL واقعی که شما می خواهید پنهان، و ThoughtCo.com را می توان به هر کلمه یا عبارت که دوست دارید است که لینک را تغییر دهید.
ایده در اینجا این است که کلاس فعال با CSS زیر برای استفاده از لینک به طور موثر پنهان می شود.
استفاده از این کد CSS
کد CSS نیاز به آدرس کلاس فعال دارد و به مرورگر توضیح می دهد که رویداد بر روی لینک کلیک کنید باید "none" باشد، مانند این:
.active {pointer-events: none؛ مکان نما: به طور پیش فرض }شما می توانید این روش را در عمل در JSFiddle مشاهده کنید. اگر کد CSS را در آن قرار دهید و سپس داده ها را دوباره بارگذاری کنید، لینک به طور ناگهانی تبدیل می شود و قابل استفاده است. این به این دلیل است که وقتی CSS اعمال نمی شود، لینک به طور معمول رفتار می کند.
توجه داشته باشید: به یاد داشته باشید که اگر کاربر کد منبع را مشاهده کند، لینک را می بیند و دقیقا می داند کجا می رود، زیرا همانطور که در بالا مشاهده می کنیم، کد هنوز وجود دارد، فقط قابل استفاده نیست.
رنگ لینک را تغییر دهید
به طور معمول، طراح وب یک لینک متفاوت رنگی از پس زمینه را ایجاد می کند تا بازدیدکنندگان بتوانند آنها را ببینند و بدانند کجا می روند. با این حال، ما برای مخفی کردن لینک ها اینجا هستیم، بنابراین اجازه دهید ببینیم که چگونه رنگ را مطابق با صفحه تغییر دهیم.
تعریف یک کلاس سفارشی
اگر از مثال اول از روش اول استفاده می کنیم، می توانیم به سادگی کلاس را به هر چیزی که میخواهیم تغییر دهیم تا فقط پیوندهای خاص پنهان شوند.
اگر ما از یک کلاس استفاده نکردیم و به جای آن CSS را از زیر به هر پیوند استفاده کردیم، همه آنها ناپدید می شوند. این همان چیزی نیست که ما بعد از آن هستیم، بنابراین از این کد HTML استفاده میکنیم که از کلاس hideme سفارشی استفاده میکند:
ThoughtCo.comپیدا کردن رنگ برای استفاده
قبل از وارد کردن کد مناسب CSS برای پنهان کردن لینک، باید مشخص کنیم کدام رنگ ما می خواهیم استفاده کنیم. اگر در حال حاضر یک پس زمینه جامد دارید مانند سفید یا سیاه، پس آسان است. با این حال، دیگر رنگ های خاص نیز باید دقیق باشند.
به عنوان مثال، اگر رنگ پسزمینه شما یک مقدار hex را از e6ded1 داشته باشد ، باید بدانید که برای کد CSS به درستی برای صفحه ای که میخواهید آن را از بین ببرید ، کار کنید.
بسیاری از این ابزار جمع آوری رنگ و یا "eyedropper" موجود است که یکی از آنها ColorPick Eyedropper برای مرورگر Chrome نامیده می شود. برای گرفتن رنگ پسزمینه صفحه وب خود از رنگ آن استفاده کنید.
سفارشی CSS برای تغییر رنگ
اکنون کد رنگ شما باید باشد، وقت آن است که از آن استفاده کنید و مقدار کلاس سفارشی از بالا برای نوشتن کد CSS:
.hideme {color: # e6ded1؛ }اگر رنگ پسزمینه شما مانند سفید یا سبز است، لازم نیست قبل از آن علامت # قرار دهید:
.hideme {color: white؛ }کد نمونه این روش را در این JSFiddle مشاهده کنید.