CSS - Con trỏ

Các con trỏ tài sản của CSS cho phép bạn chỉ định kiểu của con trỏ mà sẽ được hiển thị cho người dùng.

Một cách sử dụng tốt của thuộc tính này là sử dụng hình ảnh cho các nút gửi trên biểu mẫu. Theo mặc định, khi con trỏ di chuột qua một liên kết, con trỏ sẽ chuyển từ con trỏ sang bàn tay. Tuy nhiên, nó không thay đổi hình thức đối với nút gửi trên biểu mẫu. Do đó, bất cứ khi nào ai đó di chuột qua một hình ảnh là nút gửi, nó sẽ cung cấp manh mối trực quan rằng hình ảnh đó có thể nhấp được.

Bảng sau đây cho thấy các giá trị có thể có cho thuộc tính con trỏ:

Sr.No. Giá trị & Mô tả
1

auto

Hình dạng của con trỏ phụ thuộc vào khu vực ngữ cảnh mà nó kết thúc. Ví dụ: tôi chuyển qua văn bản, chuyển giao một liên kết, v.v.

2

crosshair

Hình chữ thập hoặc dấu cộng

3

default

Một mũi tên

4

pointer

Một bàn tay (trong IE 4 giá trị này là bàn tay)

5

move

Thanh tôi

6

e-resize

Con trỏ chỉ ra rằng một cạnh của hộp sẽ được di chuyển sang phải (phía đông)

7

ne-resize

Con trỏ chỉ ra rằng một cạnh của hộp sẽ được di chuyển lên trên và sang phải (bắc / đông)

số 8

nw-resize

Con trỏ chỉ ra rằng một cạnh của hộp sẽ được di chuyển lên và sang trái (bắc / tây)

9

n-resize

Con trỏ chỉ ra rằng một cạnh của hộp sẽ được di chuyển lên trên (hướng bắc)

10

se-resize

Con trỏ chỉ ra rằng một cạnh của hộp sẽ được di chuyển xuống và sang phải (nam / đông)

11

sw-resize

Con trỏ chỉ ra rằng một cạnh của hộp sẽ được di chuyển xuống và sang trái (nam / tây)

12

s-resize

Con trỏ chỉ ra rằng một cạnh của hộp sẽ được di chuyển xuống (phía nam)

13

w-resize

Con trỏ chỉ ra rằng một cạnh của hộp sẽ được di chuyển sang trái (phía tây)

14

text

Thanh tôi

15

wait

Một giờ ly

16

help

Dấu chấm hỏi hoặc bong bóng, lý tưởng để sử dụng trên các nút trợ giúp

17

<url>

Nguồn của tệp hình ảnh con trỏ

NOTE- Bạn nên cố gắng chỉ sử dụng những giá trị này để thêm thông tin hữu ích cho người dùng và ở những nơi, họ sẽ mong đợi nhìn thấy con trỏ đó. Ví dụ: sử dụng dấu gạch chéo khi ai đó di chuột qua liên kết có thể khiến khách truy cập nhầm lẫn.

Đây là một ví dụ -

<html>
   <head>
   </head>
   
   <body>
      <p>Move the mouse over the words to see the cursor change:</p>
      
      <div style = "cursor:auto">Auto</div>
      <div style = "cursor:crosshair">Crosshair</div>
      <div style = "cursor:default">Default</div>
      
      <div style = "cursor:pointer">Pointer</div>
      <div style = "cursor:move">Move</div>
      <div style = "cursor:e-resize">e-resize</div>
      <div style = "cursor:ne-resize">ne-resize</div>
      <div style = "cursor:nw-resize">nw-resize</div>
      
      <div style = "cursor:n-resize">n-resize</div>
      <div style = "cursor:se-resize">se-resize</div>
      <div style = "cursor:sw-resize">sw-resize</div>
      <div style = "cursor:s-resize">s-resize</div>
      <div style = "cursor:w-resize">w-resize</div>
      
      <div style = "cursor:text">text</div>
      <div style = "cursor:wait">wait</div>
      <div style = "cursor:help">help</div>
   </body>
</html>

Nó sẽ tạo ra kết quả sau: