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>
มันจะให้ผลลัพธ์ดังต่อไปนี้ -