เคอร์เซอร์ระบุตำแหน่งบนหน้าจอที่ผู้ใช้สามารถคลิกหรือป้อนข้อความได้ สามารถใช้เคอร์เซอร์ที่แตกต่างกันสำหรับส่วนประกอบต่างๆ ของเว็บไซต์ได้ นักพัฒนาต้องแน่ใจว่าเคอร์เซอร์ที่ใช้ในแอปพลิเคชันนั้นต้องสวยงาม ตัวอย่างเช่น สามารถใช้เคอร์เซอร์ชี้มือบนปุ่มบนเมาส์โฮเวอร์ ตัวบ่งชี้ข้อความ (เส้นกะพริบ) ถูกใช้บนกล่องข้อความที่จะป้อนข้อความ
มีสไตล์เคอร์เซอร์หลายแบบใน CSS ที่ใช้โดยระบุค่าของคุณสมบัติเคอร์เซอร์ อย่างไรก็ตาม นักพัฒนาสามารถสร้างเคอร์เซอร์แบบกำหนดเองได้โดยใช้ CSS
คู่มือการศึกษานี้จะให้ข้อมูลเกี่ยวกับ:
-
- เคอร์เซอร์ CSS
- CSS เคอร์เซอร์ที่กำหนดเอง
ก่อนจะเข้าเรื่อง เรามาดูรูปร่างเคอร์เซอร์ CSS บางส่วนพร้อมตัวอย่างที่ใช้งานได้จริงกันก่อน
เคอร์เซอร์ CSS
ซีเอสเอส “ เคอร์เซอร์ คุณสมบัติ ” มีค่าต่างๆ กัน เช่น ตัวชี้ ไม่มี ความคืบหน้า และอื่นๆ มาสร้างตารางที่มีแถวซึ่งเคอร์เซอร์ต่างๆ จะแสดงเมื่อโฮเวอร์เมาส์
ตัวอย่าง: การสร้างตารางที่แสดงเคอร์เซอร์ CSS ต่างๆ ใน HTML
ขั้นแรก เพิ่มองค์ประกอบ
| แท็ก | |||
|---|---|---|---|
สองแท็กเพื่อเติมข้อมูลในคอลัมน์
| ที่สองแสดงถึงองค์ประกอบปุ่มที่ใช้กับ CSS “ เคอร์เซอร์ ” ทรัพย์สินที่มีค่าต่างกัน
| รหัส HTML สำหรับสถานการณ์ข้างต้นแสดงไว้ด้านล่าง: < ตาราง >< ท > < ไทย สไตล์ = 'ความกว้าง: 200px;' > ตัวเลือกเคอร์เซอร์ css ไทย > < ไทย สไตล์ = 'ความกว้าง: 200px;' > สไตล์เคอร์เซอร์ ไทย > ท > < ท > < td > เคอร์เซอร์: ตัวชี้ td > < td >< ปุ่ม สไตล์ = 'เคอร์เซอร์: ตัวชี้;' > ตัวชี้ ปุ่ม > td > ท > < ท > < td > เคอร์เซอร์: ความคืบหน้า td > < td >< ปุ่ม สไตล์ = 'เคอร์เซอร์: ความคืบหน้า;' > ความคืบหน้า ปุ่ม > td > ท > < ท > < td > เคอร์เซอร์: ไม่อนุญาต td > < td >< ปุ่ม สไตล์ = 'เคอร์เซอร์: ไม่อนุญาต' > ไม่ได้รับอนุญาต ปุ่ม > td > ท > < ท > < td > เคอร์เซอร์: ไม่มี td > < td >< ปุ่ม สไตล์ = 'เคอร์เซอร์: ไม่มี;' > ไม่มี ปุ่ม > td > ท > < ท > < td > เคอร์เซอร์: ย้าย td > < td >< ปุ่ม สไตล์ = 'เคอร์เซอร์: เลื่อน;' > เคลื่อนไหว ปุ่ม > td > ท > < ท > < td > เคอร์เซอร์: คว้า td > < td >< ปุ่ม สไตล์ = 'เคอร์เซอร์: คว้า;' > คว้า ปุ่ม > td > ท > < ท > < td > เคอร์เซอร์: คัดลอก td > < td >< ปุ่ม สไตล์ = 'เคอร์เซอร์: คัดลอก;' > สำเนา ปุ่ม > td > ท > < ท > < td > เคอร์เซอร์: ปรับขนาดสี td > < td >< ปุ่ม สไตล์ = 'เคอร์เซอร์: ปรับขนาดสี;' > ปรับขนาดสี ปุ่ม > td > ท > < ท > < td > เคอร์เซอร์: ปรับขนาดแถว td > < td >< ปุ่ม สไตล์ = 'เคอร์เซอร์: ปรับขนาดแถว;' > ปรับขนาดแถว ปุ่ม > td > ท > < ท > < td > เคอร์เซอร์: ข้อความ td > < td >< ปุ่ม สไตล์ = 'เคอร์เซอร์: ข้อความ;' > ข้อความ ปุ่ม > td > ท > ตาราง > จัดรูปแบบองค์ประกอบ 'ทั้งหมด' * {การขยายความ: 0 ; ขอบ: 0 ; ตระกูลแบบอักษร: Arial, Helvetica, sans-serif; }
สไตล์องค์ประกอบ 'ตาราง' ตาราง {ขอบ: 0px อัตโนมัติ; เส้นขอบ: 1px solid gainsboro; }
“ ขอบ ” คุณสมบัติมีพฤติกรรมตามที่ระบุไว้ข้างต้น สไตล์องค์ประกอบ 'td' td {จัดข้อความ: กึ่งกลาง; } ใช้กับคุณสมบัติ “ จัดข้อความ ” มีค่า “ ศูนย์กลาง '. มันจะจัดข้อความของคอลัมน์ให้อยู่กึ่งกลาง
| สไตล์องค์ประกอบ 'ปุ่ม' ปุ่ม {สีพื้นหลัง: cadetblue; ช่องว่างภายใน: 10px 10px; สี: #ffffff; ความกว้าง: 150px; }
รหัสด้านบนจะสร้างผลลัพธ์ต่อไปนี้: CSS เคอร์เซอร์ที่กำหนดเองนักพัฒนาต้องใช้เคอร์เซอร์ที่เหมาะสมสำหรับแอปพลิเคชันของตน เคอร์เซอร์ควรทำให้น่าสนใจเพื่อดึงดูดความสนใจของผู้ใช้ นอกจากนี้ยังสามารถสร้างเคอร์เซอร์แบบกำหนดเองเพื่อจุดประสงค์นี้ได้ ดูตัวอย่างด้านล่าง! ตัวอย่าง: วิธีสร้างเคอร์เซอร์แบบกำหนดเองด้วย CSS ใน HTML ให้เพิ่มองค์ประกอบ div สองรายการ หนึ่งเดียวกับคลาส “ วงกลม ” และอื่น ๆ กับชั้นเรียน “ จุด '. HTML < แผนก ระดับ = 'วงกลม' > แผนก >< แผนก ระดับ = 'จุด' > แผนก > สไตล์องค์ประกอบ 'ร่างกาย' ร่างกาย {ความสูง: 100vh; } สไตล์ div 'วงกลม' .วงกลม {ความกว้าง: 20px; ความสูง: 20px; เส้นขอบ: 2px สีขาวทึบ; ขอบรัศมี: ห้าสิบ % ; }
รูปแบบ div 'จุด' .จุด {ความกว้าง: 5px; ความสูง: 5px; สีพื้นหลัง: สีขาว; ขอบรัศมี: ห้าสิบ % ; }
รหัสที่กำหนดจะแสดงเคอร์เซอร์ต่อไปนี้บนหน้าเว็บ: จาวาสคริปต์ < สคริปต์ >const cursorCircle = document.querySelector ( '.วงกลม' ) ; const cursorPoint = document.querySelector ( '.จุด' ) ; const ย้ายเคอร์เซอร์ = ( และ ) = > { const mouseY = e.clientY; const mouseX = e.clientX; cursorCircle.style.transform = ` แปลภาษา ( ${mouseX} พิกเซล, ${เม้าส์วาย} พิกเซล ) ` ; cursorPoint.style.transform = ` แปลภาษา ( ${mouseX} พิกเซล, ${เม้าส์วาย} พิกเซล ) ` ; } window.addEventListener ( 'เมาส์มูฟ' เลื่อนเคอร์เซอร์ ) สคริปต์ >
หลังจากระบุบล็อกโค้ดด้านบนแล้ว เคอร์เซอร์จะเลื่อนบนหน้าจอโดยอัตโนมัติตามที่แสดงด้านล่าง: บทสรุปซีเอสเอส “ เคอร์เซอร์ คุณสมบัติ ” มีค่ามากมายที่ระบุลักษณะเคอร์เซอร์ต่างๆ อย่างไรก็ตาม ด้วยการใช้องค์ประกอบ HTML และคุณสมบัติ CSS เราสามารถสร้างเคอร์เซอร์แบบกำหนดเองได้ จากนั้น โค้ด JavaScript จะถูกนำมาใช้เพื่อเปิดใช้งานฟังก์ชัน การศึกษานี้ได้แสดงวิธีสร้างเคอร์เซอร์ CSS แบบกำหนดเองพร้อมตัวอย่างที่ใช้งานได้จริง |
