CSS - เคอร์เซอร์

เคอร์เซอร์ทรัพย์สินของ CSS ช่วยให้คุณสามารถระบุชนิดของเคอร์เซอร์ที่ควรจะแสดงให้ผู้ใช้

การใช้คุณสมบัตินี้ที่ดีอย่างหนึ่งคือการใช้รูปภาพเพื่อส่งปุ่มบนแบบฟอร์ม โดยค่าเริ่มต้นเมื่อเคอร์เซอร์วางเมาส์เหนือลิงก์เคอร์เซอร์จะเปลี่ยนจากตัวชี้เป็นมือ อย่างไรก็ตามจะไม่เปลี่ยนรูปแบบสำหรับปุ่มส่งในแบบฟอร์ม ดังนั้นเมื่อใดก็ตามที่มีคนวางเมาส์เหนือรูปภาพที่เป็นปุ่มส่งระบบจะให้ข้อมูลที่เป็นภาพที่คลิกได้

ตารางต่อไปนี้แสดงค่าที่เป็นไปได้สำหรับคุณสมบัติเคอร์เซอร์ -

ซีเนียร์ มูลค่าและรายละเอียด
1

auto

รูปร่างของเคอร์เซอร์ขึ้นอยู่กับพื้นที่บริบทที่มันจบลง ตัวอย่างเช่น I over text ส่งลิงค์และอื่น ๆ ...

2

crosshair

crosshair หรือเครื่องหมายบวก

3

default

ลูกธนู

4

pointer

มือชี้ (ใน IE 4 ค่านี้คือมือ)

5

move

แถบ I

6

e-resize

เคอร์เซอร์ระบุว่าจะต้องย้ายขอบของกล่องไปทางขวา (ตะวันออก)

7

ne-resize

เคอร์เซอร์ระบุว่าจะต้องเลื่อนขอบของกล่องขึ้นและไปทางขวา (ทิศเหนือ / ตะวันออก)

8

nw-resize

เคอร์เซอร์ระบุว่าจะต้องเลื่อนขอบของกล่องขึ้นและไปทางซ้าย (ทิศเหนือ / ตะวันตก)

9

n-resize

เคอร์เซอร์ระบุว่าจะต้องเลื่อนขอบของกล่องขึ้น (ทิศเหนือ)

10

se-resize

เคอร์เซอร์ระบุว่าจะต้องเลื่อนขอบของกล่องลงและไปทางขวา (ใต้ / ตะวันออก)

11

sw-resize

เคอร์เซอร์ระบุว่าจะต้องเลื่อนขอบของกล่องลงและไปทางซ้าย (ทิศใต้ / ตะวันตก)

12

s-resize

เคอร์เซอร์ระบุว่าจะต้องเลื่อนขอบของกล่องลง (ทิศใต้)

13

w-resize

เคอร์เซอร์ระบุว่าต้องเลื่อนขอบของกล่องไปทางซ้าย (ทิศตะวันตก)

14

text

แถบ I

15

wait

แก้วหนึ่งชั่วโมง

16

help

เครื่องหมายคำถามหรือลูกโป่งเหมาะสำหรับใช้กับปุ่มช่วยเหลือ

17

<url>

แหล่งที่มาของไฟล์รูปภาพเคอร์เซอร์

NOTE- คุณควรพยายามใช้เฉพาะค่าเหล่านี้เพื่อเพิ่มข้อมูลที่เป็นประโยชน์สำหรับผู้ใช้และในสถานที่ที่พวกเขาคาดหวังว่าจะเห็นเคอร์เซอร์นั้น ตัวอย่างเช่นการใช้ crosshair เมื่อมีคนวางเมาส์เหนือลิงก์อาจทำให้ผู้เยี่ยมชมสับสนได้

นี่คือตัวอย่าง -

<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>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -