Η απόκρυψη ενός συνδέσμου με το CSS μπορεί να γίνει με διάφορους τρόπους, αλλά θα εξετάσουμε δύο μεθόδους στις οποίες μια διεύθυνση URL μπορεί να αποκρύπτεται εντελώς από την προβολή. Εάν θέλετε να δημιουργήσετε ένα κυνήγι σαρωτή ή αυγό Πάσχας στον ιστότοπό σας, αυτός είναι ένας πολύ ενδιαφέρον τρόπος απόκρυψης συνδέσμων.
Ο πρώτος τρόπος είναι να χρησιμοποιήσετε την τιμή "none" ως την τιμή ιδιότητας CSS του δείκτη-συμβάντων. Το άλλο είναι με το χρωματισμό του κειμένου ώστε να ταιριάζει με το φόντο της σελίδας.
Λάβετε υπόψη ότι καμία μέθοδος δεν θα κάνει τον σύνδεσμο να εξαφανιστεί τελείως από το να βρεθεί κατά την αναζήτηση του πηγαίου κώδικα. Ωστόσο, οι επισκέπτες δεν θα έχουν έναν απλό, απλό τρόπο για να το δουν, και οι αρχάριοι επισκέπτες σας δεν θα έχουν ιδέα πώς να βρουν τον σύνδεσμο.
Σημείωση: Εάν αναζητάτε οδηγίες σχετικά με τον τρόπο σύνδεσης ενός εξωτερικού φύλλου στυλ, αυτές οι οδηγίες δεν είναι αυτό που ακολουθείτε. Δείτε Τι εξωτερικό φύλλο στυλ; αντι αυτου.
Απενεργοποιήστε το συμβάν δείκτη
Η πρώτη μέθοδος που μπορούμε να χρησιμοποιήσουμε για την απόκρυψη μιας διεύθυνσης URL είναι να κάνουμε τον σύνδεσμο να μην κάνει τίποτα. Όταν το ποντίκι κρέμεται πάνω από το σύνδεσμο, δεν θα δείξει τι δείχνει η διεύθυνση URL και δεν θα σας αφήσει να το κάνετε κλικ.
Γράψτε την HTML σωστά
Μία από τις ιστοσελίδες, βεβαιωθείτε ότι ο σύνδεσμος έχει ως εξής:
ThoughtCo.comΦυσικά, το "https://www.thoughtco.com/" πρέπει να δείχνει την πραγματική διεύθυνση URL που θέλετε να αποκρύψετε και το ThoughtCo.com να μπορεί να αλλάξει σε οποιαδήποτε λέξη ή φράση όπως σας περιγράφει τον σύνδεσμο.
Η ιδέα εδώ είναι ότι η ενεργή κλάση θα χρησιμοποιηθεί με το CSS παρακάτω για να κρύψει αποτελεσματικά τη σύνδεση.
Χρησιμοποιήστε αυτόν τον κώδικα CSS
Ο κώδικας CSS πρέπει να απευθύνεται στην ενεργό κλάση και να εξηγεί στο πρόγραμμα περιήγησης ότι το συμβάν μετά το κλικ του συνδέσμου θα πρέπει να είναι "none", όπως αυτό:
ενεργός {pointer-events: none; δρομέας: προεπιλογή }}Μπορείτε να δείτε αυτή τη μέθοδο σε δράση πάνω στο JSFiddle. Εάν αφαιρέσετε τον κώδικα CSS εκεί και στη συνέχεια επαναλάβετε τα δεδομένα, ο σύνδεσμος γίνεται ξαφνικά clickable και χρησιμοποιήσιμος. Αυτό συμβαίνει επειδή όταν δεν εφαρμοστεί το CSS, ο σύνδεσμος συμπεριφέρεται κανονικά.
Σημείωση: Να θυμάστε ότι αν ο χρήστης δει τον πηγαίο κώδικα της σελίδας, θα δει τον σύνδεσμο και θα ξέρει ακριβώς πού πηγαίνει, επειδή, όπως βλέπουμε παραπάνω, ο κώδικας παραμένει εκεί, απλά δεν είναι χρησιμοποιήσιμος.
Αλλάξτε το χρώμα του συνδέσμου
Κανονικά, ένας σχεδιαστής ιστού θα κάνει τους υπερσυνδέσμους διαφορετικό χρώμα από το φόντο, ώστε οι επισκέπτες να μπορούν πραγματικά να τους δουν και να ξέρουν πού πηγαίνουν. Ωστόσο, είμαστε εδώ για να αποκρύψουμε συνδέσμους , οπότε ας δούμε πώς να αλλάξετε το χρώμα που ταιριάζει με αυτό της σελίδας.
Ορίστε μια προσαρμοσμένη κλάση
Εάν χρησιμοποιήσουμε το ίδιο παράδειγμα από την πρώτη παραπάνω μέθοδο, μπορούμε απλά να αλλάξουμε την τάξη σε ό, τι θέλουμε, έτσι ώστε να αποκρύπτονται μόνο οι ειδικοί δεσμοί.
Εάν δεν χρησιμοποιήσαμε μια τάξη και αντί να εφαρμόσουμε το CSS από κάτω σε κάθε σύνδεσμο, τότε όλα θα εξαφανιστούν. Δεν είναι αυτό που ακολουθούμε εδώ, οπότε θα χρησιμοποιήσουμε αυτόν τον κώδικα HTML που χρησιμοποιεί την προσαρμοσμένη κατηγορία hideme:
ThoughtCo.comΜάθετε ποιο χρώμα θέλετε να χρησιμοποιήσετε
Πριν εισαγάγουμε τον κατάλληλο κώδικα CSS για να αποκρύψουμε το σύνδεσμο, πρέπει να υπολογίσουμε το χρώμα που θέλουμε να χρησιμοποιήσουμε. Αν έχετε ήδη ένα συμπαγές φόντο, όπως το λευκό ή το μαύρο, τότε αυτό είναι εύκολο. Ωστόσο, και άλλα ειδικά χρώματα πρέπει να είναι ακριβή.
Για παράδειγμα, εάν το χρώμα φόντου σας έχει μια hex τιμή e6ded1 , πρέπει να ξέρετε ότι για τον κώδικα CSS να λειτουργεί σωστά για τη σελίδα που θέλετε να εξαφανιστεί.
Υπάρχουν πολλά από αυτά τα εργαλεία "επιλογής χρώματος" ή "σταγονόμετρου" διαθέσιμα, ένα από τα οποία ονομάζεται ColorPick Eyedropper για το πρόγραμμα περιήγησης Chrome. Χρησιμοποιήστε το για να δοκιμάσετε το χρώμα φόντου της ιστοσελίδας σας για να αποκτήσετε το δεκαεξαδικό χρώμα.
Προσαρμόστε το CSS για να αλλάξετε το χρώμα
Τώρα που έχετε το χρώμα που πρέπει να είναι ο σύνδεσμος, ήρθε η ώρα να χρησιμοποιήσετε αυτό και την προσαρμοσμένη τιμή κλάσης από πάνω, για να γράψετε τον κώδικα CSS:
.hideme {χρώμα: # e6ded1; }}Αν το χρώμα φόντου είναι απλό, όπως το λευκό ή το πράσινο, δεν χρειάζεται να βάλετε το σύμβολο # πριν από αυτό:
.hideme {χρώμα: λευκό; }}Δείτε τον δείγμα κώδικα αυτής της μεθόδου σε αυτό το JSFiddle.