การเปลี่ยนรูปลักษณ์ของเคอร์เซอร์โดยใช้ CSS

เราสามารถจัดการรูปภาพเคอร์เซอร์สำหรับองค์ประกอบต่างๆ ในเอกสาร HTML ได้โดยใช้คุณสมบัติเคอร์เซอร์ CSS

ไวยากรณ์

The syntax of CSS cursor property is as follows:
Selector {
   cursor: /*value*/
}

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

ซีเนียร์	คุณค่าและรายละเอียด
1	นามแฝง เป็นการบ่งชี้นามแฝงของบางสิ่งที่จะถูกสร้างขึ้น
2	เลื่อนทั้งหมด แสดงว่าสามารถเลื่อนไปในทิศทางใดก็ได้
3	อัตโนมัติ เป็นค่าเริ่มต้นและเบราว์เซอร์ตั้งค่าเคอร์เซอร์
4	เซลล์ แสดงว่าสามารถเลือกเซลล์ (หรือชุดเซลล์) ได้
5	เมนูบริบท แสดงว่ามีเมนูบริบท
6	ปรับขนาดคอล แสดงว่าคอลัมน์สามารถปรับขนาดในแนวนอนได้
7	คัดลอก มันบ่งบอกว่ามีบางสิ่งที่จะคัดลอก
8	กากบาท มันแสดงเป็นเป้าเล็ง
9	ค่าเริ่มต้น มันแสดงเคอร์เซอร์เริ่มต้น
10	ปรับขนาดอิเล็กทรอนิกส์ แสดงว่าต้องเลื่อนขอบกล่องไปทางขวา (ทิศตะวันออก)
11	ew-resize ระบุเคอร์เซอร์ปรับขนาดแบบสองทิศทาง
12	คว้า แสดงว่าจับได้
13	คว้า แสดงว่าจับได้
14	ช่วย แสดงว่ามีความช่วยเหลือ
15	ย้าย มันบ่งบอกว่าบางสิ่งกำลังจะถูกย้าย
16	n-ปรับขนาด แสดงว่าต้องยกขอบกล่องขึ้น (ทิศเหนือ)
17	ne-resize แสดงว่าต้องเลื่อนขอบกล่องขึ้นขวา (เหนือ/ตะวันออก)
18	ใหม่-ปรับขนาด ระบุเคอร์เซอร์ปรับขนาดแบบสองทิศทาง
19	ns-resize ระบุเคอร์เซอร์ปรับขนาดแบบสองทิศทาง
20	nw-ปรับขนาด แสดงว่าต้องเลื่อนขอบกล่องขึ้นซ้าย (เหนือ/ตะวันตก)
21	nwse-ปรับขนาด ระบุเคอร์เซอร์ปรับขนาดแบบสองทิศทาง
22	ไม่มีดรอป แสดงว่าไอเทมที่ลากไม่สามารถดรอปที่นี่ได้
23	ไม่มี ไม่มีการแสดงเคอร์เซอร์สำหรับองค์ประกอบ
24	ไม่อนุญาต แสดงว่าการดำเนินการที่ร้องขอจะไม่ถูกดำเนินการ
25	ตัวชี้ เป็นตัวชี้และระบุลิงค์
26	ความคืบหน้า แสดงว่าโปรแกรมไม่ว่าง (อยู่ระหว่างดำเนินการ)
27	ปรับขนาดแถว แสดงว่าสามารถปรับขนาดแถวในแนวตั้งได้
28	s-ปรับขนาด แสดงว่าต้องเลื่อนขอบกล่องลงมา (ทางใต้)
29	se-resize แสดงว่าขอบกล่องจะเลื่อนลงมาขวา (ใต้/ตะวันออก)
30	sw-ปรับขนาด แสดงว่าขอบของกล่องจะเลื่อนลงมาซ้าย (ใต้/ตะวันตก)
31	ข้อความ หมายถึงข้อความที่เลือกได้
32	URL รายการ URL ที่คั่นด้วยเครื่องหมายจุลภาคไปยังเคอร์เซอร์ที่กำหนดเองโดยมีเคอร์เซอร์ทั่วไปที่กล่าวถึงในตอนท้ายว่าไม่ปลอดภัย
33	ข้อความแนวตั้ง หมายถึงข้อความแนวตั้งที่สามารถเลือกได้
34	w-ปรับขนาด แสดงว่าต้องย้ายขอบกล่องไปทางซ้าย (ตะวันตก)
35	รอ แสดงว่ารายการไม่ว่าง
36	ซูมเข้า แสดงว่าสามารถซูมเข้าได้
37	ซูมออก แสดงว่าสามารถซูมออกได้
38	เริ่มต้น มันตั้งค่าคุณสมบัติเคอร์เซอร์เป็นค่าเริ่มต้น
39	สืบทอด มันสืบทอดคุณสมบัติเคอร์เซอร์จากองค์ประกอบหลัก

ต่อไปนี้คือตัวอย่างการใช้คุณสมบัติเคอร์เซอร์ CSS

ตัวอย่าง

<!DOCTYPE html>
<html>
<head>
<style>
div {
   margin: 5px;
   float: left;
}
#one {
   background-color: beige;
}
#two {
   background-color: lavender;
}
.n-resize {cursor: n-resize;}
.ne-resize {cursor: ne-resize;}
.nw-resize {cursor: nw-resize;}
.not-allowed {cursor: not-allowed;}
.pointer {cursor: pointer;}
</style></head>
<body>
<div id="one">
<div class="nw-resize">left corner</div><div class="n-resize">up</div>
<div class="ne-resize">right corner</div>
</div>
<div id="two">
<div class="not-allowed">Not-allowed</div><div class="pointer">Pointer</div>
</div>
</body>
</html>

ผลลัพธ์

การเปลี่ยนรูปลักษณ์ของเคอร์เซอร์โดยใช้ CSS