Cách Thay đổi Con Trỏ Khi Di Chuột

Mục lục:

Cách Thay đổi Con Trỏ Khi Di Chuột
Cách Thay đổi Con Trỏ Khi Di Chuột

Video: Cách Thay đổi Con Trỏ Khi Di Chuột

Video: Cách Thay đổi Con Trỏ Khi Di Chuột
Video: Cách Thay Đổi Con Trỏ Chuột Bằng Custom Cursor - Sirius Khôi 2024, Có thể
Anonim

Một số phần tử của trang web thay đổi giao diện của chúng khi di chuột - điều này theo mặc định được quy định cho chúng bởi cài đặt của ngôn ngữ HTML (Ngôn ngữ Đánh dấu Siêu văn bản - "Ngôn ngữ Đánh dấu Siêu văn bản"). Ngôn ngữ này có các công cụ cho phép bạn thay đổi cài đặt tương tự cho các phần tử trang khác. Nếu cần, bạn có thể sử dụng cả CSS (Cascading Style Sheets) và ngôn ngữ kịch bản JavaScript phía máy khách cho mục đích này.

Cách thay đổi con trỏ khi di chuột
Cách thay đổi con trỏ khi di chuột

Hướng dẫn

Bước 1

Sử dụng thuộc tính style để có thể đặt biến con trỏ trong thẻ của đối tượng trang web mà bạn quan tâm. Ví dụ: mã HTML của trường văn bản đầu vào hướng dẫn trình duyệt của khách truy cập thay đổi giao diện của con trỏ giống như khi di chuột qua một liên kết, có thể được viết như sau:

Bước 2

Chọn giao diện con trỏ mong muốn từ danh sách các giá trị hợp lệ cho tham số con trỏ. Trong ví dụ được hiển thị ở bước trước, giá trị của con trỏ được sử dụng - giá trị của bàn tay có cùng tác dụng. Ngoài hai giá trị này, các tùy chọn sau cho sự xuất hiện của con trỏ được cung cấp: crosshair, e-resize, help, move, n-resize, ne-resize, nw-resize, tiến bộ, s-resize, se-resize, thay đổi kích thước sw, văn bản, w -resize, chờ đợi. Ví dụ: để làm cho con trỏ trông giống như mũi tên hai đầu từ phía trên bên trái sang phía dưới bên phải trong mẫu mã trên, hãy sử dụng nw-resize thay vì con trỏ:

Các chữ cái phía trước giá trị thay đổi kích thước giúp xác định hướng mà mũi tên hướng đến theo giá trị này - chúng, giống như trên la bàn, tương ứng với chỉ định của các điểm chính. Ví dụ: nw là viết tắt của nord-west (tây bắc), s cho nam (nam), v.v.

Bước 3

Sử dụng URL của tệp thay vì các giá trị được xác định trước nếu bạn đã tải lên hình ảnh con trỏ của riêng mình ở định dạng cur gốc của nó. Để thực hiện việc này, hãy sử dụng cú pháp sau:

<input style = "cursor: url (https://someSite.ru/someCursor.cur) "/>

Nếu tệp nằm trong cùng một thư mục với trang hoặc trong một thư mục con, thì thay vì một địa chỉ tuyệt đối, bạn có thể chỉ định một địa chỉ tương đối.

Bước 4

Sử dụng thuộc tính onmouseover nếu bạn muốn thay đổi giao diện của con trỏ bằng JavaScript. Ví dụ:

Mã này sẽ hoạt động giống hệt như mẫu ở bước hai.

Đề xuất: