Πώς να δημιουργήσετε έναν σύνδεσμο με την εικόνα του δείκτη στο απλό CSS

Ενημερώθηκε: 27 Φεβρουαρίου 2020 / Άρθρο από: Jerry Low

* Σημειώσεις ενημέρωσης: Η δημοσίευση αυτή δημοσιεύτηκε για πρώτη φορά τον Οκτώβριο του 2009. Ορισμένες από τις τεχνικές που ανέφερα ίσως είναι ξεπερασμένες. Αναφέρετε ευγενικά αυτόν τον οδηγό για την τελευταία τεχνική δημιουργίας ιστοτόπου.

Τι είναι το hover; Ορισμός που αναφέρεται από UWStout.edu:

Το «Hover» είναι ένα εφέ που εμφανίζεται όταν τοποθετείτε το δρομέα πάνω από οποιονδήποτε σύνδεσμο. Ο σύνδεσμος μπορεί να κωδικοποιηθεί για να ανταποκρίνεται στο hover αλλάζοντας χρώμα, δείχνοντας ένα νέο γραφικό ή ακόμα και παίζοντας ένα αρχείο ήχου.

Το εφέ αιωρήματος βελτιώνει τη χρηστικότητα του ιστού και βοηθά τους ιδιοκτήτες ιστού να κατευθύνουν την κυκλοφορία τους στον ιστό. Όταν επιθυμείτε οι χρήστες του διαδικτύου σας να δώσουν ιδιαίτερη προσοχή σε έναν ειδικό σύνδεσμο, ένας καλός τρόπος να το κάνετε είναι να δημιουργήσετε έναν σύνδεσμο με ελκυστικό εφέ αιωρηματοποίησης. Ένα απλό εφέ αιωρήματος όπως αυτό (μια απλή υπογράμμιση και αλλαγή χρώματος κειμένου) υποδεικνύει ότι το κείμενο είναι «με δυνατότητα κλικ» και βελτιώνει τις αλληλεπιδράσεις στον ιστό. Ωστόσο, η αλλαγή του χρώματος και των στυλ του κειμένου (υπογράμμιση / overline / έντονη γραφή) είναι πολύ βασικά και υπάρχουν πολλά περισσότερα που μπορούν να γίνουν με το hover.

Σε αυτό το άρθρο, θα δείξω πώς μπορείτε να δημιουργήσετε καλές συνδέσεις με το φαινόμενο του hover.

Παράδειγμα 1: Συνδέστε το κουμπί με το δείκτη του ποντικιού

Αρχικά, ρίξτε μια ματιά στο παράδειγμα εργασίας (τοποθετήστε το ποντίκι πάνω από τον σύνδεσμο για να δείτε πώς λειτουργεί - αλλαγή εικονιδίου στο πλάι).

Παράδειγμα 1 - Σύνδεσμος με εικόνα κουμπιού

Αυτή είναι η ολοκληρωμένη έκδοση αυτού που θα κατασκευαστεί σε αυτό το παράδειγμα.

Πώς το δημιουργούμε σε απλό CSS;

Η Εικόνα Κουμπιού

Βήμα 1, όπως μπορείτε να δείτε, χρειαζόμαστε εικονίδια βέλους σε δύο διαφορετικές εκδόσεις. Στο παράδειγμά μας, χρησιμοποιούσα το κόκκινο (#CC3300) ως το προεπιλεγμένο κουμπί σύνδεσης. και γκρι (#333333) για την επίδραση του hover. Ένα τέτοιο κουμπί μπορεί εύκολα να γίνει χρησιμοποιώντας οποιοδήποτε λογισμικό επεξεργασίας εικόνας.

Τώρα έχουμε το κόκκινο κουμπί χρώματος (ας πούμε, b1.png) και το χρώμα rey (το κουμπί λέει, b2.png). Συγχώνευση αυτών των δύο σε ένα αρχείο εικόνας με b1.png στην κορυφή του b2.png. Αυτή θα είναι η τελική εικόνα για τη σύνδεση. Ονομάστε το (για παράδειγμα, x.png) και μεταφορτώστε την επιθυμητή τοποθεσία (για την περίπτωσή μου το έβαλα στο φάκελο του προτύπου WP).

Για την αναφορά σας:

b1.png , b2.png , και x.png

Ο Κώδικας CSS

Στη συνέχεια, στον κώδικα CSS. Βασικά, αυτό που θέλουμε να επιτύχουμε είναι να παύσουμε το κείμενο του συνδέσμου ελαφρώς προς τα δεξιά για να φτιάξουμε χώρο για το κουμπί. και, ταυτόχρονα, να εμφανίσετε μια διαφορετική εικόνα όταν ο σύνδεσμος βρίσκεται σε κατάσταση αιωρήματος. Αυτά είναι αρκετά θεμελιώδη είδη εκτός από το ότι χρειαζόμαστε μια μικρή συστροφή στη θέση του φόντου. Το κόλπο είναι να δείξει το πάνω μέρος της εικόνας (το κόκκινο κουμπί) για τον αρχικό σύνδεσμο. και όταν τοποθετείτε το δείκτη του ποντικιού, μετατοπίστε την εικόνα φόντου με ένα -11px (μπορεί να διαφέρει στο δικτυακό σας τόπο) για να εμφανιστεί το γκρι κουμπί.

.xa {χρώμα: # cc3300; padding-left: 14px; γραμματοσειρά-βάρος: έντονα. εικόνα-φόντου: url (εικόνες / x.png); φόντο-θέση: 0 2px; αναπαράσταση φόντου: όχι-επανάληψη }}
.xa: περάστε το {χρώμα: #333333; padding-left: 14px; γραμματοσειρά-βάρος: έντονα. εικόνα-φόντου: url (εικόνες / x.png); φόντο-θέση: 0 -11px; αναπαράσταση φόντου: όχι-επανάληψη }}

Εκτέλεση

Για να δείξετε αυτό το φαινόμενο, τοποθετήστε απλά την κλάση x στην καθορισμένη περιοχή. Ακολουθεί ένα παράδειγμα για το πώς μπορείτε να το κάνετε.

Αρχική σελίδα

Παράδειγμα 2: Σύνδεση στο φόντο του hover

Με την ίδια έννοια, υπάρχουν ατελείωτοι τρόποι που μπορείτε να κάνετε τους συνδέσμους σας να φαίνονται δροσερούς. Ακολουθεί ένα άλλο παράδειγμα σχετικά με το τι μπορούμε να κάνουμε με τα αποτελέσματα του hover με μια ελαφρώς διαφορετική μέθοδο. Και πάλι, ρίξτε μια ματιά στην τελική έκδοση.

Παράδειγμα 2 - Σύνδεσμος στο παρασκήνιο

Σε αυτό το παράδειγμα, τι θα κάνω είναι να δημιουργήσω μια υπερσύνδεση που μοιάζει με κουμπί, όπου το φόντο θα αλλάξει όταν οι χρήστες τοποθετούν το ποντίκι πάνω από αυτό.

Πώς το δημιουργούμε σε απλό CSS;

Οι εικόνες φόντου

Αρχικά, δημιουργήστε δύο εικόνες στρογγυλεμένου ορθογωνίου. Για λόγους επίδειξης, δεν θα συγχωνεύσουμε αυτές τις δύο εικόνες σε αυτό το παράδειγμα. Θα ονομάσουμε το κόκκινο (# CC3300) ορθογώνιο ως b1.png. και το καστανό ορθογώνιο (#9F2800) ως b2.png.

Ο Κώδικας CSS

Στη συνέχεια, εδώ είναι οι κωδικοί για το φύλλο στυλ σας (ονομάζουμε την τάξη «y» σε αυτό το δεύτερο παράδειγμα).

ay {πλάτος: 280px; ύψος: 42px; χρώμα: #000000; padding: 10px; κείμενο-διακόσμηση: κανένα? οθόνη: μπλοκ? γραμματοσειρά-βάρος: έντονα. εικόνα-φόντου: url (εικόνες / b1.png); αναπαράσταση φόντου: όχι-επανάληψη }}
ay: αιωρείται {πλάτος: 280px; ύψος: 42px; χρώμα: #FFFFFF; padding: 10px; γραμματοσειρά-βάρος: έντονα. κείμενο-διακόσμηση: κανένα? οθόνη: μπλοκ? εικόνα-φόντου: url (εικόνες / b2.png); αναπαράσταση φόντου: όχι-επανάληψη }}

Εκτέλεση

Για να εμφανιστεί ο σύνδεσμος, απλώς εισαγάγετε την κλάση (y) στην ετικέτα στον πηγαίο κώδικα. Παράδειγμα:

Αρχική σελίδα

Ολοκληρώνοντας

Ελπίζω ότι αυτό το άρθρο σας έφερε πολύτιμες πληροφορίες και ενέπνευσε ορισμένους από εσάς να χρησιμοποιήσουν το CSS με δημιουργικό τρόπο. Εάν υπάρχουν άλλα σημεία που νομίζετε ότι πρέπει να προσθέσω σε αυτόν τον οδηγό, αισθανθείτε ελεύθερος να αφήσετε τις ιδέες σας στην ενότητα σχολίων.

Σχετικά με τον Jerry Low

Ιδρυτής του WebHostingSecretRevealed.net (WHSR) - ένα σχόλιο φιλοξενίας που εμπιστεύτηκε και χρησιμοποιήθηκε από τους χρήστες του 100,000. Περισσότερο από 15 χρόνια εμπειρίας στο web hosting, μάρκετινγκ θυγατρικών, και SEO. Συνεργάτης στο ProBlogger.net, Business.com, SocialMediaToday.com και πολλά άλλα.