Αλλαγή του Δείκτη με CSS
= Τύποι Δεικτών Ποντικιού και Ρυθμίσεις CSS =

  • Σε μια ιστοσελίδα, το σχήμα του δείκτη ποντικιού μπορεί να ρυθμιστεί χρησιμοποιώντας την ιδιότητα CSS "cursor".
  • Αυτός ο οδηγός εξετάζει τις τιμές CSS για διαφορετικά σχήματα δεικτών και πώς να τα ρυθμίσετε.
  • Μπορείτε να κάνετε κλικ στις ιδιότητες για να τις αντιγράψετε. Αυτή η σελίδα περιλαμβάνει την ιδιότητα "cursor:copy" για αντιγράψιμα στοιχεία.
  • Παρέχονται δείγματα εικόνας για κάθε ιδιότητα. Ωστόσο, το σχήμα μπορεί να διαφέρει ανάλογα με την έκδοση του λειτουργικού σας συστήματος και τον περιηγητή.
  • Η τοποθέτηση του ποντικιού πάνω στις ενότητες "On Mouse" σας επιτρέπει να δείτε τον δείκτη καθώς εμφανίζεται στο περιβάλλον σας.
《Πώς να Ρυθμίσετε》
  1. Αν θέλετε να το εφαρμόσετε σε πολλές ενότητες μιας σελίδας, είναι κοινή πρακτική να το γράφετε στην ενότητα <head> ή σε εξωτερικό αρχείο CSS.
    ".cursorstyle" είναι το όνομα μιας προσαρμοσμένης κλάσης.
    <style>
    .cursorstyle {
    cursor : pointer;
    }
    </style>
     Αντιγραφή 
  2. Παράδειγμα εφαρμογής του παραπάνω CSS χρησιμοποιώντας το χαρακτηριστικό "class".
    <span class="cursorstyle">Κείμενο</span>  Αντιγραφή 
    <div class="cursorstyle">Κείμενο</div>  Αντιγραφή 
    <a class="cursorstyle">Κείμενο</a>  Αντιγραφή 
  3. Παράδειγμα εφαρμογής σε μία ενότητα ή λίγα στοιχεία.
    Χρησιμοποιήστε το χαρακτηριστικό "style" και γράψτε την ιδιότητα απευθείας.
    <span style="cursor : pointer;">Κείμενο</span>  Αντιγραφή 
    <div style="cursor : pointer;">Κείμενο</div>  Αντιγραφή 
《Τύποι Δεικτών και Τιμές CSS》
Τιμές CSS
[Κάντε κλικ για Αντιγραφή]
Δείγμα στο OS
[Μπορεί να διαφέρει ανάλογα με τον φυλλομετρητή]
Mouse-Over
Προεπισκόπηση
Περιγραφή
Windows Mac
auto
cursor: auto;
《Mouse-Over》
Ο φυλλομετρητής καθορίζει αυτόματα τον δείκτη με βάση το πλαίσιο
default
cursor: default;
《Mouse-Over》
Εμφανίζει ένα τυπικό βέλος
none
cursor: none
   
《Mouse-Over》
Δεν εμφανίζεται κανένας δείκτης
context-menu
cursor: context-menu
《Mouse-Over》
Επιτρέπει τη χρήση μενού περιβάλλοντος
help
cursor: help
《Mouse-Over》
Στοιχείο βοήθειας
pointer
cursor: pointer
《Mouse-Over》
Όταν περνάς το ποντίκι πάνω από έναν σύνδεσμο, κ.λπ.
progress
cursor: progress
《Mouse-Over》
Επεξεργασία μιας εργασίας. Ενδέχεται αλληλεπίδραση με τον χρήστη
wait
cursor: wait
《Mouse-Over》
Επεξεργασία μιας εργασίας. Δεν επιτρέπεται αλληλεπίδραση με τον χρήστη
cell
cursor: cell
《Mouse-Over》
Επιλέξιμο κελί πίνακα
crosshair
cursor: crosshair
《Mouse-Over》
Δείκτης σταυρού, συνήθως που υποδηλώνει επιλογή σε μια εικόνα bitmap
text
cursor: text
《Mouse-Over》
Επιλέξιμο κείμενο
vertical-text
cursor: vertical-text
《Mouse-Over》
Επιλέξιμο κατακόρυφο κείμενο
alias
cursor: alias
《Mouse-Over》
Μπορεί να δημιουργήσει συντόμευση ή alias
copy
cursor: copy
《Mouse-Over》
Αντιγράφεται
move
cursor: move
《Mouse-Over》
Μετακινείται
no-drop
cursor: no-drop
《Mouse-Over》
Δεν μπορεί να απορριφθεί σε αυτή τη θέση
not-allowed
cursor: not-allowed
《Mouse-Over》
Η ζητούμενη ενέργεια δεν μπορεί να εκτελεστεί
grab
cursor: grab
《Mouse-Over》
Αντικείμενο που μπορεί να σύρεται, συνήθως σε συνδυασμό με **grabbing**
grabbing
cursor: grabbing
《Mouse-Over》
Κατά τη διάρκεια του σύρσιμου, σε συνδυασμό με **grab**
all-scroll
cursor: all-scroll
《Mouse-Over》
Μπορεί να κυλίσει σε οποιαδήποτε κατεύθυνση
col-resize
cursor: col-resize
《Mouse-Over》
Αναγκαία κιβώτια με οριζόντια κίνηση άκρης
row-resize
cursor: row-resize
《Mouse-Over》
Αναγκαία κιβώτια με κάθετη κίνηση άκρης
n-resize
cursor: n-resize
《Mouse-Over》
Αναγκαία κιβώτια με κίνηση άκρης προς τον **βορρά (πάνω)**
w-resize
cursor: w-resize
《Mouse-Over》
Αναγκαία κιβώτια με κίνηση άκρης προς τη **δυτική (αριστερά)**
s-resize
cursor: s-resize
《Mouse-Over》
Αναγκαία κιβώτια με κίνηση άκρης προς τον **νότο (κάτω)**
e-resize
cursor: e-resize
《Mouse-Over》
Αναγκαία κιβώτια με κίνηση άκρης προς την **ανατολή (δεξιά)**
nw-resize
cursor: nw-resize
《Mouse-Over》
Αναγκαία κιβώτια με κίνηση άκρης προς τον **βορειοδυτικό (πάνω-αριστερά)**
ne-resize
cursor: ne-resize
《Mouse-Over》
Αναγκαία κιβώτια με κίνηση άκρης προς τον **βορειοανατολικό (πάνω-δεξιά)**
sw-resize
cursor: sw-resize
《Mouse-Over》
Αναγκαία κιβώτια με κίνηση άκρης προς τον **νοτιοδυτικό (κάτω-αριστερά)**
se-resize
cursor: se-resize
《Mouse-Over》
Αναγκαία κιβώτια με κίνηση άκρης προς τον **νοτιοανατολικό (κάτω-δεξιά)**
ew-resize
cursor: ew-resize
《Mouse-Over》
Αναγκαία κιβώτια με **διπλή κατεύθυνση οριζόντια** κίνηση άκρης
ns-resize
cursor: ns-resize
《Mouse-Over》
Αναγκαία κιβώτια με **διπλή κατεύθυνση κάθετη** κίνηση άκρης
nesw-resize
cursor: nesw-resize
《Mouse-Over》
Αναγκαία κιβώτια με κίνηση άκρης σε **κατευθύνσεις βορειοανατολικού-νοτιοδυτικού (πάνω-δεξιά και κάτω-αριστερά)**
nwse-resize
cursor: nwse-resize
《Mouse-Over》
Αναγκαία κιβώτια με κίνηση άκρης σε **κατευθύνσεις βορειοδυτικού-νοτιοανατολικού (πάνω-αριστερά και κάτω-δεξιά)**
zoom-in
cursor: zoom-in
《Mouse-Over》
Μπορεί να μεγεθύνει
zoom-out
cursor: zoom-out
《Mouse-Over》
Μπορεί να μειώσει
URL
Οποιαδήποτε εικόνα μπορεί να ρυθμιστεί ως δείκτης.
Το μέγεθος της εικόνας περιορίζεται σε **128×128px**. Το μέγεθος της δείγμα εικόνας είναι **70×70px**.
《Mouse-Over》
.cursorimg {cursor: url(image-path), auto;}
".cursorimg" μπορεί να είναι οποιοδήποτε όνομα.
<div {cursor: url(image-path), auto;}>Κείμενο</div>
《Υποστήριξη για Οθόνες Retina》
.cursorimg {cursor: -webkit-image-set(url(@1x-image) 1x, url(@2x-image) 2x), auto;}

おすすめサイト・関連サイト…

Last updated : 2025/03/08