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

Άρθρο που γράφτηκε από:
  • Κατασκευή Ιστοσελίδων
  • Ενημερώθηκε: Aug 02, 2013

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

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

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

<p class = 'x'> <a href="http://www.webhostingsecretrevealed.com"> Αρχική σελίδα </a> </ p>

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

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

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

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

Πώς το δημιουργούμε σε απλό 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) στην ετικέτα <a href> στον πηγαίο σας κώδικα. Παράδειγμα:

<a href="http://www.webhostingsecretrevealed.com" class="y"> Αρχική σελίδα </a>

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

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

Περισσότερα μαθήματα CSS

Αν σας αρέσει αυτή η ανάρτηση, βεβαιωθείτε επίσης ότι έχετε check out Πώς να χρησιμοποιήσετε σωστά τα κινούμενα γραφικά CSS 3, Πρέπει να διαβάσετε τα CSS 3 Tutorials 2012, καθώς Κάντε το site σας δροσερό με αυτές τις τεχνικές CSS 3.

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

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