Thiết Lập Con Trỏ Chuột Cursor Với CSS

Trang chủ » Trỏ Chuột » Thiết Lập Con Trỏ Chuột Cursor Với CSS

Có thể bạn quan tâm

Thuộc tính cursor trong CSS

Thuộc tính CSS cursor cho phép bạn thiết lập kiểu trỏ chuột khi nó di chuyển trên phần tử, ví dụ khi di chuyển chuột trên phần tử thì chuyển biểu tượng chuột thành thành các : biểu tượng help, biểu tượng mũi tên, biểu tượng tay chỉ ...

Cú pháp

cursor: cursor-value;

Ví dụ:

<div style="cursor:help; padding: 10px; background-color: #ff9800"> Hãy để chuột trên phần tử này, biểu tượng help xuất hiện </div> Hãy để chuột trên phần tử này, biểu tượng help xuất hiện

Các giá trị thiết lập kiểu cursor gồm:

default crosshair pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize wait help progress copy move no-drop not-allowed zoom-in zoom-out grab grabbing no-drop tro chuot

Sử dụng ảnh làm con trỏ chuột

Để thiết lập một ảnh nào đó (như ảnh .png, .ico ...) thành trỏ chuột, nếu ảnh đó ở địa chỉ urlico thì dùng cú pháp:

cursor: url('urlico'), auto;

Có thể sử dụng nhiều địa chỉ ảnh, nó sẽ tìm từ trái sang phải cho đến khi địa chỉ đó tồn tại. Như cú pháp trên, nếu địa chỉ ảnh không tồn tại ảnh thì nó sử dụng biểu tượng auto

Ngoài ra có thể xác định điểm trỏ chuột của ảnh

cursor: url('urlico') x y, auto;

Mặc định điểm trỏ chuột trên ảnh là x = 0, y = 0 (góc trên trái của ảnh).

Ví dụ có ảnh sau: https://cdn-icons-png.flaticon.com/128/3119/3119214.png

<style> .mycursor { cursor: url("https://cdn-icons-png.flaticon.com/128/3119/3119214.png"), auto; height: 50px; border: 1px solid red; } </style> <div class="mycursor"> Di chuột vào đây để xem kết quả </div> Di chuột vào đây để xem kết quả ĐĂNG KÝ KÊNH, XEM CÁC VIDEO TRÊN XUANTHULAB Đăng ký nhận bài viết mới

Từ khóa » Trỏ Chuột