Hướng dẫn css cursor pointer

Nhóm phát triển của chúng tôi vừa ra mắt website langlearning.net học tiếng Anh, Nga, Đức, Pháp, Việt, Trung, Hàn, Nhật, ... miễn phí cho tất cả mọi người.
Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.

Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới. Facebook

1- CSS Cursor

CSS cursor cho phép bạn chỉ định kiểu con trỏ (cursor) hiển thị cho người dùng khi con trỏ ở trên (over) một phần tử.

/* Keyword value */
cursor: pointer;
cursor: auto;
.....
/* Global values */
cursor: inherit;
cursor: initial;
cursor: unset;

cursor-example.html

   
      
      
      
   
   
       
CSS cursor
       

          Move the cursor over the elements to see the results.
       
      

        
alias
        
all-scroll
        
auto
        
copy
        
crosshair
        
default
        
help
        
inherit
        
move

        
pointer
        
progress
        
text
        
vertical-text

        
wait
        
no-drop

        
grab
        
grabbing

        
e-resize
        
n-resize
        
s-resize
        
w-resize

        
col-resize
        
row-resize

        
ne-resize
        
nw-resize
        
se-resize
        
sw-resize

        
nesw-resize
        
nwse-resize

        
zoom-in
        
zoom-out
      
   

Các giá trị được định nghĩa sẵn của CSS cursor và hình dạng tương ứng của chúng rất dễ hiểu, bạn có thể xem hình minh họa dưới đây:

CSS {cursor:auto}

Hình dạng của con trỏ (cursor) ứng với giá trị auto phụ thuộc vào ngữ cảnh khu vực mà con trỏ đang ở đứng trên (over). Chẳng hạn, con trỏ sẽ có hình dạng hand (bàn tay) khi nó đứng trên một liên kết,...

CSS {cursor:default}

Hình dạng của con trỏ (cursor) ứng với giá trị default phụ thuộc vào nền tảng (platform), cụ thể là phụ thuộc vào hệ điều hành và trình duyệt. Thường là hình mũi tên (arrow).

Ngoài các giá trị được định nghĩa sẵn ở trên, bạn có thể tạo ra một kiểu con trỏ dựa trên một hình ảnh.

/* URL and coordinates, with a keyword fallback */
cursor: url(cursor1.png) 4 12, auto;
cursor: url(cursor1.png), url(cursor2.png) 2 2, pointer;

Url(..)

Bạn có thể cung cấp một hoặc nhiều giá trị url(..), chúng được ngăn cách với nhau bởi dấu phẩy ( , ). Giá trị đầu tiên sẽ được ưu tiên sử dụng, các giá trị sau là dự phòng trong, chúng được sử dụng trong trường hợp trình duyệt không hỗ trợ một định dạng ảnh nào đó. Giá trị dự phòng cuối cùng nên là một giá trị được định nghĩa trước (Xem danh sách ở trên).

x, y

Giá trị (x,y) là tọa độ của ảnh và không bắt buộc, chúng là số nguyên không âm và nhỏ hơn 32.

Ví dụ:

custom-cursor-example.html

   
      
      
      
   
   
       
CSS Custom cursor
       

          Move the cursor over me!