Làm thế nào để ẩn liên kết bằng cách sử dụng CSS

Ẩn một liên kết với CSS có thể được thực hiện theo nhiều cách, nhưng chúng tôi sẽ xem xét hai phương pháp trong đó một URL có thể được ẩn hoàn toàn khỏi chế độ xem. Nếu bạn muốn tạo một cuộc săn lùng hoặc trứng Phục sinh trên trang web của mình, đây là một cách thú vị để ẩn liên kết.

Cách thứ nhất là sử dụng "none" làm giá trị thuộc tính CSS pointer-events. Khác là chỉ đơn giản là tô màu văn bản để phù hợp với nền của trang.

Hãy nhớ rằng không phương thức nào sẽ làm cho liên kết biến mất hoàn toàn khỏi tìm thấy khi tìm kiếm mã nguồn. Tuy nhiên, du khách sẽ không có một cách đơn giản, đơn giản để xem nó, và khách truy cập mới làm quen của bạn sẽ không có manh mối về cách tìm liên kết.

Lưu ý: Nếu bạn đang tìm kiếm hướng dẫn về cách liên kết một biểu định kiểu bên ngoài, các hướng dẫn này không phải là những gì bạn đang theo dõi. Xem Bảng kiểu ngoài là gì? thay thế.

Vô hiệu hóa sự kiện con trỏ

Phương pháp đầu tiên chúng ta có thể sử dụng để ẩn một URL là làm cho liên kết không làm gì cả. Khi di chuột qua liên kết, nó sẽ không hiển thị URL trỏ đến và nó sẽ không cho phép bạn nhấp vào nó.

Viết HTML chính xác

Một trang web, đảm bảo siêu liên kết đọc như sau:

ThoughtCo.com

Tất nhiên, "https://www.thoughtco.com/" cần trỏ đến URL thực mà bạn muốn ẩn và ThoughtCo.com có thể được thay đổi thành bất kỳ từ hoặc cụm từ nào bạn thích mô tả liên kết.

Ý tưởng ở đây là lớp đang hoạt động sẽ được sử dụng với CSS bên dưới để ẩn liên kết một cách hiệu quả.

Sử dụng mã CSS này

Mã CSS cần phải giải quyết lớp đang hoạt động và giải thích cho trình duyệt rằng sự kiện khi nhấp vào liên kết, phải là "không", như sau:

.active {pointer-events: none; con trỏ: mặc định; }

Bạn có thể thấy phương thức này đang hoạt động trên JSFiddle. Nếu bạn loại bỏ mã CSS ở đó, và sau đó chạy lại dữ liệu, liên kết đột nhiên trở thành có thể nhấp và có thể sử dụng được. Điều này là do khi CSS không được áp dụng, liên kết hoạt động bình thường.

Lưu ý: Hãy nhớ rằng nếu người dùng xem mã nguồn của trang, họ sẽ thấy liên kết và biết chính xác vị trí của nó vì chúng tôi thấy ở trên, mã vẫn ở đó, nó không thể sử dụng được.

Thay đổi Màu của Liên kết

Thông thường, một nhà thiết kế web sẽ làm cho các siêu liên kết có màu khác với nền để khách truy cập thực sự có thể nhìn thấy chúng và biết chúng đi đâu. Tuy nhiên, chúng tôi ở đây để ẩn liên kết , vì vậy, hãy xem cách thay đổi màu sắc để khớp với màu của trang.

Xác định một lớp tùy chỉnh

Nếu chúng ta sử dụng cùng một ví dụ từ phương thức đầu tiên ở trên, chúng ta có thể đơn giản thay đổi lớp thành bất cứ thứ gì chúng ta muốn để chỉ các liên kết đặc biệt được ẩn đi.

Nếu chúng ta không sử dụng một lớp và thay vào đó áp dụng CSS từ bên dưới cho mỗi liên kết, thì tất cả chúng sẽ biến mất. Đó không phải là những gì chúng tôi đang ở đây, vì vậy chúng tôi sẽ sử dụng mã HTML này đang sử dụng lớp hideme tùy chỉnh:

ThoughtCo.com

Tìm hiểu màu sắc để sử dụng

Trước khi chúng tôi nhập mã CSS thích hợp để ẩn liên kết, chúng tôi cần tìm ra màu nào chúng tôi muốn sử dụng. Nếu bạn có nền chắc chắn, như màu trắng hoặc đen, thì điều đó thật dễ dàng. Tuy nhiên, các màu đặc biệt khác cũng cần phải chính xác.

Ví dụ: nếu màu nền của bạn có giá trị hex là e6ded1 , bạn cần biết rằng mã CSS hoạt động chính xác cho trang bạn muốn nó biến mất.

Có rất nhiều công cụ "công cụ chọn màu" hoặc "eyedropper" có sẵn, một trong số đó có tên là ColorPick Eyedropper cho trình duyệt Chrome. Sử dụng nó để lấy mẫu màu nền của trang web của bạn để có được màu hex.

Tùy chỉnh CSS để thay đổi màu

Bây giờ bạn đã có màu mà liên kết nên, đó là thời gian để sử dụng nó và giá trị của lớp tùy chỉnh từ trên cao, để viết mã CSS:

.hideme {color: # e6ded1; }

Nếu màu nền của bạn đơn giản như màu trắng hoặc xanh lá cây, bạn không phải đặt ký hiệu # trước nó:

.hideme {color: trắng; }

Xem mã mẫu của phương thức này trong JSFiddle này.