Sunday, 10 November 2024

เอาเมาส์วางแล้ว Cursor เปลี่ยนไป ด้วย Cursor Style ใน css

04 May 2018
180
luminox watches

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

เอาเมาส์วางแล้ว Cursor เปลี่ยนไป ด้วย Cursor Style ใน css

เอาเมาส์วางแล้ว Cursor เปลี่ยนไป ด้วย Cursor Style ใน css

มีรูปแบบ Cursor Style หลายแบบที่สามารถกำหนดได้ใน CSS เช่น:

auto – ให้เบราว์เซอร์เลือกรูปแบบเมาส์เอง
default – เมาส์แบบปกติที่ใช้งานในส่วนมาก
pointer – เมาส์รูปแบบมือชี้สำหรับลิงก์หรือปุ่ม
text – เมาส์รูปแบบขีดล่างสำหรับเขียนข้อความ
wait – เมาส์รูปแบบเวลารอ
crosshair – เมาส์รูปแบบกากบาท
help – เมาส์รูปแบบคำช่วยเหลือ
เพื่อกำหนด Cursor Style ใน CSS สามารถใช้โค้ดดังนี้:

 

selector { cursor: value; }

 

โดย selector คือเลือกอิลิเมนต์ที่ต้องการให้มีการเปลี่ยนแปลง Cursor Style และ value คือรูปแบบ Cursor Style ที่ต้องการกำหนดให้กับเมาส์ ตัวอย่างเช่น:

 

a:hover { cursor: pointer; }

Thanat Sirikitphattana

แบ่งปันกัน เราอยู่กันไม่เกิน 100 ปีหรอกครับ
สุดท้ายก็ทิ้งไว้ที่โลก จะคงเหลือไว้แต่คุณงามความดีที่ให้ระลึกถึงกันครับ

Follow Us / Thanat Sirikitphattana