ในหัวข้อนี้ผมจะสรุปตัวอย่างวิธีการใช้งาน Pseudo-Class ประเภท Dynamic Pseudo-Class ให้ผู้อ่านได้นำไปเป็นกรณีศึกษานะครับ เราลองไปดูกันเลยครับ
Pseudo-Class :active นั้นจะทำการอ้างอิงกับอิลิเมนต์ที่ผู้ใช้กำลังคลิกอยู่ขณะนั้น (กำลังคลิกก็คือว่าคลิกค้างไว้นะครับ) ซึ่งอิลิเมนต์นั้น ๆ จะได้รับคุณสมบัตินี้ก็ต่อเมื่อผู้ใช้คลิกเมาส์แบบ onmousedown ไปยัง element หรือ hyperlinks นั้น ๆ (ถ้าผู้ใช้ปล่อยเมาส์จะไม่ได้รับ Style นี้) เราลองไปดูตัวอย่างกันเลยครับ
Pseudo-Class :hover นั้นจะทำการอ้างอิงกับอิลิเมนต์ที่ผู้ใช้วางเมาส์ไว้บนอิลิเมนต์นั้น ๆ ณ เวลานั้น ซึ่งในขณะที่ผู้ใช้วาง เมาส์ไว้บน element มันก็จะถูกเปลี่ยน Style ตามที่เรากำหนดไว้ใน :hover แต่ถ้าผู้ใช้เอาเมาส์ออกจากอิลิเมนต์นั้น ๆ มันก็จะ กลับมาสู่ Style เดิม (อาจจะเป็นทั้ง :visited หรือ :link ก็ได้แล้วแต่ว่าอิลิเมนต์นั้น ๆ ถูกคลิกเข้าไปหรือยัง)
ถ้าผู้อ่านติดตามบทความในหมวดหมู่นี้มาตั้งแต่แรกจะทราบว่า :link และ :visited มันคืออะไรแล้วนะครับ ซึ่งทั้งสองตัวนี้มีลักษณะการทำงานที่ตรงกันข้ามกันก็คือ :link จะทำเมื่อเรายังไม่เคยคลิกลิงค์นั้น ๆ เลย แต่ถ้าเป็น :visited นั้นจะเกิดขึ้นถ้าเราเคยคลิกลิงค์นั้น ๆ ไปแล้ว
Pseudo-classes ถูกใช้ในกรณีที่เกิดเหตุการณ์แบบ dynamic (ก็คือการกำหนด Style ตามเหตุการณ์ที่เกิดขึ้น) เช่น เหตุการณ์การนำเมาส์ไปวางบนอิลิเมนต์นั้น ๆ หรือที่เรียกว่า mouse rolling over หรือเหตุการณ์ที่เกิดในกรณีที่เราไปคลิกที่อิลิเมนต์นั้น ๆ ซึ่งเราสามารถกำหนดได้ว่าต้องการให้อิลิเมนต์ไหนใช้ Pseudo-Classes ได้
Login
Search