:hover :focus :active และ :visited
กำหนดรูปแบบสถานะของลิงก์และปุ่มแบบโต้ตอบโดยใช้คลาสเสมือน CSS ที่พบบ่อยที่สุด
:hover :focus :active และ :visited เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
คลาสเทียมคืออะไร
คลาสเทียมใช้เลือกองค์ประกอบตามสถานะหรือความสัมพันธ์กับองค์ประกอบอื่น คลาสเทียมเริ่มต้นด้วยโคลอนเดี่ยว : และไม่จำเป็นต้องเพิ่มแอตทริบิวต์ให้กับ HTML
:hover
:hover มีผลเมื่อ ตัวชี้ของผู้ใช้อยู่เหนือองค์ประกอบ เป็นตัวเลือกสถานะแบบโต้ตอบที่ใช้บ่อยที่สุด
<p><a href="#" class="demo-hover">Hover this link</a></p>
<div class="card demo-hover">Hover this card</div>
:focus
:focus มีผลเมื่อองค์ประกอบได้รับโฟกัส (ผ่านแป้น Tab บนแป้นพิมพ์หรือการกำหนดโฟกัสด้วยโปรแกรม) ซึ่งสำคัญอย่างยิ่งต่อการเข้าถึง
<input type="text" placeholder="Auto-focused input" autofocus />
<button>Click me (focus me too)</button>
:focus-visible
:focus-visible เป็น :focus เวอร์ชันที่ฉลาดกว่า — จะแสดงวงแหวนโฟกัสเฉพาะเมื่อได้รับโฟกัสผ่านแป้นพิมพ์ ไม่ใช่เมาส์ วิธีนี้ช่วยให้ผู้ใช้แป้นพิมพ์เห็นตัวบ่งชี้โฟกัส โดยไม่แสดงวงแหวนเมื่อคลิกด้วยเมาส์
<button autofocus>Keyboard-focused button shows a ring</button>
:focus-within
:focus-within มีผลกับองค์ประกอบเมื่อองค์ประกอบลูกใด ๆ ภายในได้รับโฟกัส เหมาะสำหรับจัดรูปแบบกล่องแบบฟอร์มหรือแถบค้นหาเมื่อกำลังใช้งาน
<form class="search-form"><input type="search" placeholder="Search…" autofocus /></form>
:active
:active มีผลขณะที่กำลังเปิดใช้งานองค์ประกอบ — ระหว่างการคลิกเมาส์หรือการสัมผัส ช่วยสร้างการตอบสนองทางภาพให้กับองค์ประกอบแบบโต้ตอบ
<button class="demo-active">Pressed button (demo state)</button>
:visited
:visited ใช้จัดรูปแบบลิงก์ที่ผู้ใช้เคยเข้าชมแล้ว เนื่องจากข้อกังวลด้านความเป็นส่วนตัว จึงมีคุณสมบัติเพียงบางรายการเท่านั้นที่จัดรูปแบบด้วย :visited ได้ (สี, สีพื้นหลัง, สีเส้นขอบ, สีเส้นรอบองค์ประกอบ)
<a href="#" class="demo-visited">Visited link</a>
ลำดับสถานะลิงก์ (LVHA)
เมื่อต้องจัดรูปแบบสถานะลิงก์ทั้งสี่ ให้ทำตามลำดับ LVHA เพื่อป้องกันปัญหาความจำเพาะเจาะจง: Lลิงก์, Vเข้าชม, Hวางตัวชี้, Aใช้งาน
<p><a href="#">Unvisited (link)</a></p>
<p><a href="#" class="demo-visited">Visited</a></p>
<p><a href="#" class="demo-hover">Hover</a></p>
<p><a href="#" class="demo-active">Active</a></p>
โฮเวอร์บนอุปกรณ์สัมผัส
หน้าจอสัมผัสไม่มีสถานะโฮเวอร์ในลักษณะเดียวกับเมาส์ :hover อาจทำงานชั่วครู่เมื่อแตะ สำหรับการโต้ตอบที่ออกแบบเฉพาะสำหรับการสัมผัส ให้ใช้ :active หรือคิวรีสื่อ @media (hover: none)
การรวมสถานะ
สามารถต่อคลาสเทียมเข้าด้วยกันเพื่อจัดรูปแบบหลายสถานะพร้อมกันได้:
<a href="#" class="demo-visited-hover">Visited link being hovered</a>
<button>Click-focused button gets no ring</button>
การเปลี่ยนผ่านสถานะโฮเวอร์
สร้างเอฟเฟกต์โฮเวอร์ที่ราบรื่นโดยใช้การเปลี่ยนผ่านกับสถานะพื้นฐาน (ไม่ใช่สถานะ :hover) เพื่อให้การเปลี่ยนผ่านทำงานได้ทั้งสองทิศทาง:
<button class="btn demo-hover">Hover transitions smoothly</button>
ตรวจสอบอย่างรวดเร็ว
คลาสเทียมใดแสดงรูปแบบโฟกัสเฉพาะการนำทางด้วยแป้นพิมพ์ ไม่ใช่การคลิกเมาส์?
สรุป
:hover ทำงานเมื่อตัวชี้อยู่เหนือองค์ประกอบ; :focus ทำงานเมื่ออินพุตได้รับโฟกัส; :active ทำงานระหว่างการคลิก; :visited ใช้กับลิงก์ที่เคยเข้าชม ใช้ :focus-visible สำหรับวงแหวนโฟกัสที่แสดงเฉพาะการใช้แป้นพิมพ์ ทำตามลำดับ LVHA สำหรับสถานะลิงก์ และต้องมีตัวบ่งชี้โฟกัสที่มองเห็นได้เพื่อรองรับการเข้าถึงเสมอ
คำถามที่พบบ่อย
บทเรียน “:hover :focus :active และ :visited” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “:hover :focus :active และ :visited” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “:hover :focus :active และ :visited”
กำหนดรูปแบบสถานะของลิงก์และปุ่มแบบโต้ตอบโดยใช้คลาสเสมือน CSS ที่พบบ่อยที่สุด คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “:hover :focus :active และ :visited” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม
ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- :hover :focus :active และ :visited
- :nth-child และ :nth-of-type
- :not() :is() และ :where()
- :checked :disabled และคลาสเสมือนของสถานะแบบฟอร์ม