การซ่อนลิงก์ด้วย CSS สามารถทำได้หลายวิธี แต่เราจะดูสองวิธีที่สามารถซ่อน URL จากมุมมองได้ทั้งหมด หากคุณต้องการสร้างการล่าสัตว์กินของเน่าหรือไข่อีสเตอร์บนเว็บไซต์ของคุณนี่เป็นวิธีที่น่าสนใจในการซ่อนลิงก์
วิธีแรกคือการใช้ "none" เป็นค่าคุณสมบัติ CSS ของตัวชี้ - เหตุการณ์ อีกอย่างหนึ่งคือการระบายสีข้อความให้ตรงกับพื้นหลังของหน้า
โปรดทราบว่าทั้งสองวิธีจะทำให้ลิงก์หายไปจากที่พบเมื่อค้นหาซอร์สโค้ด อย่างไรก็ตามผู้เข้าชมจะไม่มีวิธีที่เรียบง่ายตรงไปตรงมาในการที่จะเห็นและผู้เข้าชมที่เป็นสามเณรจะไม่มีเบาะแสว่าจะหาลิงก์นี้ได้อย่างไร
หมายเหตุ: หากคุณกำลังมองหาคำแนะนำในการเชื่อมโยงสไตล์ชีตภายนอกคำแนะนำเหล่านี้ไม่ใช่สิ่งที่คุณต้องการ ดู รูปแบบภายนอกเป็นอย่างไร แทน.
ปิดการใช้งานตัวชี้เหตุการณ์
วิธีแรกที่เราสามารถใช้เพื่อซ่อน URL คือทำให้ลิงก์ไม่ทำอะไร เมื่อเลื่อนเมาส์ไปที่ลิงก์ลิงก์จะไม่แสดง URL ที่ชี้ไปและจะไม่ให้คุณคลิก
เขียน HTML อย่างถูกต้อง
หนึ่งหน้าเว็บให้แน่ใจว่าการเชื่อมโยงหลายมิติอ่านเช่นนี้:
ThoughtCo.comแน่นอนว่า "https://www.thoughtco.com/" ต้องชี้ไปที่ URL จริงที่คุณต้องการซ่อนไว้และ ThoughtCo.com สามารถเปลี่ยนเป็นคำหรือวลีที่คุณชอบซึ่งอธิบายลิงก์ได้
ความคิดที่นี่คือชั้นเรียนที่ใช้งานอยู่จะใช้กับ CSS ด้านล่างเพื่อซ่อนลิงก์ได้อย่างมีประสิทธิภาพ
ใช้โค้ด CSS นี้
โค้ด CSS จำเป็นต้องระบุคลาสที่ใช้งานอยู่และอธิบายให้เบราว์เซอร์ทราบว่าเหตุการณ์ดังกล่าวเกิดขึ้นเมื่อคลิกลิงก์ควรเป็น "ไม่มี" เช่นนี้
. {ตัวชี้เหตุการณ์: ไม่มี; เคอร์เซอร์: ค่าดีฟอลต์ }คุณสามารถดูวิธีการนี้ได้ใน JSFiddle หากคุณลบโค้ด CSS ออกแล้วเรียกใช้ข้อมูลใหม่อีกครั้งลิงก์จะกลายเป็นคลิกและใช้งานได้โดยอัตโนมัติ เนื่องจากเมื่อ CSS ไม่ได้ใช้การเชื่อมโยงจะทำงานได้ตามปกติ
หมายเหตุ: โปรดจำไว้ว่าหากผู้ใช้ดูรหัสต้นฉบับของหน้าเว็บผู้ใช้จะเห็นลิงก์และทราบว่าจะไปที่ใดเพราะอย่างที่เราเห็นข้างต้นโค้ดยังอยู่ที่นั่นก็ไม่สามารถใช้งานได้
เปลี่ยนสีของลิงก์
โดยปกตินักออกแบบเว็บไซต์จะทำให้ไฮเปอร์ลิงก์มีสีแตกต่างจากพื้นหลังเพื่อให้ผู้เข้าชมสามารถมองเห็นพวกเขาได้และรู้ว่าพวกเขาไปที่ไหน อย่างไรก็ตามเราสามารถ ซ่อนลิงก์ ได้ดังนั้นเรามาดูวิธีเปลี่ยนสีให้ตรงกับของหน้าเว็บ
กำหนดคลาสที่กำหนดเอง
ถ้าเราใช้ตัวอย่างเดียวกันจากวิธีการแรกข้างต้นเราสามารถเปลี่ยนคลาสให้เป็นสิ่งที่เราต้องการเพื่อให้มีการซ่อนเฉพาะลิงก์พิเศษ
ถ้าเราไม่ได้ใช้คลาสและใช้ CSS แทนจากด้านล่างไปยังทุกลิงก์แล้วทุกคนก็จะหายไป นี่ไม่ใช่สิ่งที่เรากำลังตามมาดังนั้นเราจะใช้รหัส HTML นี้ซึ่งใช้คลาส hideme ที่กำหนดเอง:
ThoughtCo.comหาสีอะไรที่จะใช้
ก่อนที่เราจะป้อนรหัส CSS ที่เหมาะสมเพื่อซ่อนลิงก์เราจำเป็นต้องค้นหาว่าเราต้องการใช้สีอะไร ถ้าคุณมีพื้นหลังที่มั่นคงอยู่แล้วเช่นขาวหรือดำแล้วที่ง่าย อย่างไรก็ตามสีพิเศษอื่น ๆ ต้องถูกต้องด้วย
ตัวอย่างเช่นถ้าสีพื้นหลังมีค่า hex เป็น e6ded1 คุณจำเป็นต้องทราบว่าโค้ด CSS จะทำงานได้อย่างถูกต้องสำหรับหน้าที่คุณต้องการให้หายไป
มีเครื่องมือเลือกสีหรือเครื่องมือ eyedropper จำนวนมากซึ่งหนึ่งในนั้นเรียกว่า ColorPick Eyedropper สำหรับเบราว์เซอร์ Chrome ใช้มันเพื่อตัวอย่างสีพื้นหลังของหน้าเว็บของคุณเพื่อให้ได้สีฐานสิบหก
ปรับแต่ง CSS เพื่อเปลี่ยนสี
ตอนนี้คุณมีสีที่ลิงค์ควรจะเป็นถึงเวลาที่จะใช้ที่และค่าชั้นเรียนที่กำหนดเองจากด้านบนเพื่อเขียนโค้ด CSS:
.hideme {color: # e6ded1; }หากสีพื้นหลังของคุณเป็นแบบง่ายๆเช่นสีขาวหรือสีเขียวคุณไม่จำเป็นต้องใส่เครื่องหมาย # ก่อน:
.hideme {สี: ขาว; }ดูโค้ดตัวอย่างของวิธีนี้ใน JSFiddle นี้