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

ในคู่มือนี้ คุณจะได้เรียนรู้:

• คุณสมบัติ CSS ของเคอร์เซอร์คืออะไร
• วิธีเปลี่ยนเคอร์เซอร์เป็นรูปภาพบน Hover โดยใช้ CSS

เริ่มกันเลย!

คุณสมบัติ CSS 'เคอร์เซอร์' คืออะไร?

ในการควบคุมลักษณะที่ปรากฏของเมาส์เหนือองค์ประกอบ HTML ' เคอร์เซอร์ สามารถใช้คุณสมบัติของ CSS ได้ อนุญาตให้เปลี่ยนเคอร์เซอร์ปกติเป็นประเภทต่างๆ เช่น คัดลอกเคอร์เซอร์ ตัวชี้ด้วยมือ คว้า และอีกมากมาย คุณยังสามารถตั้งค่าเคอร์เซอร์แบบกำหนดเองได้ด้วยการตั้งค่า url ของรูปภาพในคุณสมบัติเคอร์เซอร์

ไวยากรณ์

ไวยากรณ์ของคุณสมบัติเคอร์เซอร์ถูกกำหนดเป็น:

ในไวยากรณ์ที่กำหนดข้างต้น กำหนดเส้นทางของรูปภาพใน ' url() ” ที่คุณต้องการแสดงบนหน้าจอ

ตอนนี้เราจะย้ายไปที่ตัวอย่างเพื่อเปลี่ยนเคอร์เซอร์ปกติเป็นรูปภาพเมื่อวางเมาส์ไว้

จะเปลี่ยนเคอร์เซอร์เป็นรูปภาพบนโฮเวอร์โดยใช้ CSS ได้อย่างไร

หากต้องการเปลี่ยนเคอร์เซอร์เป็นรูปภาพเมื่อวางเมาส์ไว้ ให้เพิ่มองค์ประกอบใน HTML ก่อน

ตัวอย่างที่ 1: การเปลี่ยนเคอร์เซอร์เป็นรูปภาพเมื่อวางเมาส์ไว้โดยใช้คุณสมบัติเคอร์เซอร์

เราจะสร้างหัวข้อ

และชื่อคลาสของปุ่ม “ btn ”

HTML

< ร่างกาย >
< ชั่วโมง1 > เปลี่ยนเคอร์เซอร์เป็นรูปภาพบน Hover ชั่วโมง1 >
< ปุ่ม ระดับ = 'บีทีเอ็น' > คลิกฉัน ปุ่ม >
ร่างกาย >

ขณะนี้ การวางเมาส์เหนือปุ่มจะแสดงเคอร์เซอร์เริ่มต้น:

ตอนนี้ย้ายไปที่ CSS และเปลี่ยนเคอร์เซอร์ไปที่รูปภาพ

จากนั้นกำหนดเส้นทางของภาพใน “ url() ” ตัวอย่างเช่น เราได้ระบุ “i กับ.svg ” ตามภาพที่เราเลือก จากนั้นตั้งค่าคุณสมบัติเคอร์เซอร์เป็น “ รถยนต์ ”

CSS

.btn {
เคอร์เซอร์: url ( icon.svg ) , อัตโนมัติ;
ช่องว่างภายใน: 10px;
}

บันทึกโค้ดด้านบนและรันไฟล์ HTML เพื่อดูผลลัพธ์ต่อไปนี้:

ผลลัพธ์ที่ระบุระบุว่าเคอร์เซอร์เปลี่ยนเป็นรูปภาพเมื่อวางเมาส์ได้สำเร็จ

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

ตัวอย่างที่ 2: การตั้งค่าเคอร์เซอร์เริ่มต้นบน Hover

ตัวอย่างเช่น เราจะให้ URL ของรูปภาพและตั้งค่าคุณสมบัติเคอร์เซอร์เป็น “ รถยนต์ ”:

เคอร์เซอร์: url ( ) , อัตโนมัติ;

ด้วยเหตุนี้ เคอร์เซอร์จะไม่เปลี่ยนแปลงเมื่อวางเมาส์เหนือปุ่ม:

ตัวอย่างที่ 3: การตั้งค่าทางเลือกของรูปภาพบน Hover

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

เคอร์เซอร์: url ( ) , ตัวชี้;

ดังที่คุณเห็นในผลลัพธ์ด้านล่าง เคอร์เซอร์จะเปลี่ยนเป็นตัวชี้มือเมื่อวางเมาส์เหนือปุ่ม:

เราได้จัดเตรียมวิธีที่ง่ายที่สุดในการเปลี่ยนภาพเคอร์เซอร์บนโฮเวอร์โดยใช้ CSS

บทสรุป

ใน CSS คุณสามารถเปลี่ยนเคอร์เซอร์ไปที่รูปภาพเมื่อวางเมาส์ไว้โดยใช้ ' เคอร์เซอร์ ' คุณสมบัติ. อนุญาตให้เปลี่ยนเคอร์เซอร์ปกติเป็นรูปภาพโดยกำหนด ' url ” ของรูปภาพไปยังคุณสมบัติเคอร์เซอร์ คุณสามารถใช้เคอร์เซอร์ประเภทใดก็ได้ที่คุณต้องการแสดงเมื่อวางเมาส์เหนือองค์ประกอบ บทความนี้สาธิตวิธีการเปลี่ยนเคอร์เซอร์เป็นตัวชี้แบบมือ