CSS รูปแบบของเคอร์เซอร์

CSS Knowledge เป็น บอร์ดรวามความรู้ CCC เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderators: mindphp, ผู้ดูแลกระดาน

GoB
PHP Super Member
PHP Super Member
Posts: 212
Joined: 12/01/2015 10:14 am

CSS รูปแบบของเคอร์เซอร์

Post by GoB » 26/01/2015 4:22 pm

CSS รูปแบบของเคอร์เซอร์

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

Code: Select all

<html>
<head>
<style type="text/css">  
.curMove{  	//กำหนดชื่อ Class
  cursor:move;      	//กำหนดรูปแบบเมื่อมีการย้ายตำแหน่งเคอร์เซอร์
}  
</style> 
    <div class="curMove"></div>     //เรียกใช้ Class
    <div>  
    <div style="cursor:auto">เคอร์เซอร์แบบ Auto</div>  
    <div style="cursor:crosshair">เคอร์เซอร์แบบ Crosshair</div>  
    <div style="cursor:pointer">เคอร์เซอร์แบบ Pointer</div>  
    <div style="cursor:move">เคอร์เซอร์แบบ Move</div>  
    <div style="cursor:text">เคอร์เซอร์แบบ text</div>  
    <div style="cursor:wait">เคอร์เซอร์แบบ wait</div>  
    <div style="cursor:help">เคอร์เซอร์แบบ help</div> 
    </div>  
</head>
<body>
</body>
</html>

********************ผลลัพธ์ที่ได้********************
1.jpg
1.jpg (17.09 KiB) Viewed 281 times
**รูปแบบของเคอร์เซอร์เพิ่มเติม
2.jpg
2.jpg (50.07 KiB) Viewed 281 times
3.jpg
3.jpg (61.07 KiB) Viewed 281 times

Return to “CSS Knowledge”

Who is online

Users browsing this forum: No registered users and 16 guests