บทความ:
Perl
PHP
HTML
CSS
XML
DTD
XSD
RSS
WSDL
Linux
Site Map
Board
Connect Us: facebooktwitter

ตัวอย่างการใช้งาน Pseudo-Class

นนทชัย ทรัพย์ทวีพงศ์ 2009-09-03 21:43:05   หมวดหมู่ CSS > Pseudo-Class  ให้คะแนนบทความนี้(0)  ลดคะแนนบทความนี้(0)  จำนวน Comment(0)  จำนวนคนอ่านบทความ(387)  

ในหัวข้อนี้ผมจะสรุปตัวอย่างวิธีการใช้งาน Pseudo-Class ประเภท Dynamic Pseudo-Class ให้ผู้อ่านได้นำไปเป็นกรณีศึกษานะครับ เราลองไปดูกันเลยครับ

:active

นนทชัย ทรัพย์ทวีพงศ์ 2009-09-03 21:42:28   หมวดหมู่ CSS > Pseudo-Class  ให้คะแนนบทความนี้(0)  ลดคะแนนบทความนี้(0)  จำนวน Comment(0)  จำนวนคนอ่านบทความ(213)  

Pseudo-Class :active นั้นจะทำการอ้างอิงกับอิลิเมนต์ที่ผู้ใช้กำลังคลิกอยู่ขณะนั้น (กำลังคลิกก็คือว่าคลิกค้างไว้นะครับ) ซึ่งอิลิเมนต์นั้น ๆ จะได้รับคุณสมบัตินี้ก็ต่อเมื่อผู้ใช้คลิกเมาส์แบบ onmousedown ไปยัง element หรือ hyperlinks นั้น ๆ (ถ้าผู้ใช้ปล่อยเมาส์จะไม่ได้รับ Style นี้) เราลองไปดูตัวอย่างกันเลยครับ

:hover

นนทชัย ทรัพย์ทวีพงศ์ 2009-09-03 21:41:48   หมวดหมู่ CSS > Pseudo-Class  ให้คะแนนบทความนี้(0)  ลดคะแนนบทความนี้(0)  จำนวน Comment(0)  จำนวนคนอ่านบทความ(245)  

Pseudo-Class :hover นั้นจะทำการอ้างอิงกับอิลิเมนต์ที่ผู้ใช้วางเมาส์ไว้บนอิลิเมนต์นั้น ๆ ณ เวลานั้น ซึ่งในขณะที่ผู้ใช้วาง เมาส์ไว้บน element มันก็จะถูกเปลี่ยน Style ตามที่เรากำหนดไว้ใน :hover แต่ถ้าผู้ใช้เอาเมาส์ออกจากอิลิเมนต์นั้น ๆ มันก็จะ กลับมาสู่ Style เดิม (อาจจะเป็นทั้ง :visited หรือ :link ก็ได้แล้วแต่ว่าอิลิเมนต์นั้น ๆ ถูกคลิกเข้าไปหรือยัง)

:link และ :visited

นนทชัย ทรัพย์ทวีพงศ์ 2009-09-03 21:40:52   หมวดหมู่ CSS > Pseudo-Class  ให้คะแนนบทความนี้(0)  ลดคะแนนบทความนี้(0)  จำนวน Comment(0)  จำนวนคนอ่านบทความ(276)  

ถ้าผู้อ่านติดตามบทความในหมวดหมู่นี้มาตั้งแต่แรกจะทราบว่า :link และ :visited มันคืออะไรแล้วนะครับ ซึ่งทั้งสองตัวนี้มีลักษณะการทำงานที่ตรงกันข้ามกันก็คือ :link จะทำเมื่อเรายังไม่เคยคลิกลิงค์นั้น ๆ เลย แต่ถ้าเป็น :visited นั้นจะเกิดขึ้นถ้าเราเคยคลิกลิงค์นั้น ๆ ไปแล้ว

Pseudo-Classes

นนทชัย ทรัพย์ทวีพงศ์ 2009-09-03 21:39:42   หมวดหมู่ CSS > Pseudo-Class  ให้คะแนนบทความนี้(0)  ลดคะแนนบทความนี้(0)  จำนวน Comment(0)  จำนวนคนอ่านบทความ(227)  

Pseudo-classes ถูกใช้ในกรณีที่เกิดเหตุการณ์แบบ dynamic (ก็คือการกำหนด Style ตามเหตุการณ์ที่เกิดขึ้น) เช่น เหตุการณ์การนำเมาส์ไปวางบนอิลิเมนต์นั้น ๆ หรือที่เรียกว่า mouse rolling over หรือเหตุการณ์ที่เกิดในกรณีที่เราไปคลิกที่อิลิเมนต์นั้น ๆ ซึ่งเราสามารถกำหนดได้ว่าต้องการให้อิลิเมนต์ไหนใช้ Pseudo-Classes ได้

1
Login  Login
ค้นหา  Search