Hover ในอินเทอร์เฟซ: มันคืออะไร, ประเภทของผลกระทบ และการนำไปใช้

Hover ในการออกแบบเว็บคืออะไร

Hover (จากภาษาอังกฤษ “to hover”) — การตอบสนองทางสายตาขององค์ประกอบอินเทอร์เฟซเมื่อเคยร์เซอร์หมูอยู่เหนือมัน คำนี้ใช้สำหรับทั้ง CSS pseudo-class :hover และสถานะขององค์ประกอบเมื่อนำเมาส์และชี้

แนวคิดของ hover เกิดขึ้นในอินเทอร์เฟซกราฟิกยุคแรกของ Xerox Alto (1973) และได้กลายเป็นมาตรฐานบนเว็บเมื่อมีการแนะนำ CSS2 ในปี 1998 ตั้งแต่นั้นมา hover ได้กลายเป็นส่วนสำคัญของประสบการณ์ผู้ใช้บนเดสก์ทอป

ตามแหล่งข้อมูล CSS Usage Statistics (2025), 94% ของเว็บไซต์ใน 1000 อันดับแรกใช้ pseudo-class :hover สำหรับอย่างน้อยหนึ่งองค์ประกอบ Hover ถูกนำไปใช้กับปุ่ม (89%), ลิงก์ (85%) และการ์ด (62%) มากที่สุด

ความแตกต่างระหว่าง hover และสถานะอื่นๆ

Hover ≠ active :hover เปิดใช้งานเมื่อนำเมาส์และชี้ :active เปิดใช้งานขณะที่คลิก :focus เปิดใช้งานเมื่อได้รับโฟกัสผ่านแป้นพิมพ์ แต่ละสถานะมีวัตถุประสงค์ของมัน Hover คือการดูตัวอย่างคร่าวๆ active คือการยืนยันการกระทํา

Pseudo-class :hover ใน CSS

Pseudo-class :hover ใน CSS ใช้รูปแบบกับองค์ประกอบเมื่อผู้ใช้นำเคยร์เซอร์หมูไปวงเหนือมัน มันทำงานกับองค์ประกอบ HTML ใด้แต่มักใช้กับองค์ประกอบที่สามารถโต้ตอบได้

/* Basic hover implementation */
.button {
    background: #4A90D9;
    color: white;
    padding: 12px 24px;
    border: none;
    transition: all 0.3s ease;
}

.button:hover {
    background: #357ABD;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(74,144,217,0.4);
}

ความเฉพาะเจาะจง ของตัวเลือก :hover เหมือนกับ class (0,1,0) หากคุณต้องการเปลี่ยนค่า hover สำหรับองค์ประกอบใดเฉพาะ ให้ใช้ตัวเลือกที่มีความเฉพาะเจาะจงสูงกว่า ลำดับการประกาศ มีความสำคัํ: หากประกาศ :hover หลังจาก :focus อาจทำให้ hover ไม่ทำงานเมื่อได้รับโฟกัส

Pseudo-class แบบรวม

:hover สามารถรวมกับ pseudo-class อื่นๆได้ เพื่อสร้างตรรกะที่ซับซ้อน ตัวอย่าง .card:hover .card__title เปลี่ยนรูปแบบของหัวข้อภายในการ์ดเมื่อนำเมาส์และชี้ไปที่การ์ดทั้งหมด ซึ่งช่วยให้สามารถสร้างผลกระทบที่มีเอฟเฟกต์ซ้อนกันได้

ประเภทของผลกระทบ hover

ผลกระทบ hover ถูกแบ่งตามประเภทของคุณสมบัติที่ถูกเปลี่ยนแปลง แต่ละประเภทเหมาะสมกับสถานการณ์ที่แตกต่างกัน และสร้างความรู้สึกที่แตกต่างกันให้กับผู้ใช้

ประเภทที่มีประสิทธิภาพมากที่สุด คือการผสมผสานของผลกระทบด้านสีและเงา Material Design แนะนำให้ใช้ elevation change (การเปลี่ยนความสูงของเงา) เป็นประเภทหลักของผลตอบกลับ hover

ตามแหล่งข้อมูล Google Material Design (2024), ผลกระทบ hover ควรเป็นที่สังเกตแต่ไม่รบกวน ระยะเวลาแอนิเมชั่นที่แนะนำคือ 200–300 มิลลิวินาที ผลกระทบที่เร็วเกินไป (น้อยกว่า 100 มิลลิวินาที) อาจไม่ถูกสังเกต ในขณะที่ผลกระทบที่ช้าเกินไป (มากกว่า 500 มิลลิวินาที) ทำให้ผู้ใช้รำคาญ

CSS Transitions สำหรับผลกระทบที่ลื่นไฬล

คุณสมบัติ CSS transition ทำให้ผลกระทบ hover เป็นไปอย่างลื่นไฬลโดยการเปลี่ยนแปลงคุณสมบัติตามเวลา หากไม่มี transition hover จะเกิดขึ้นทันที ซึ่งดูกระตุกกระตอกและไม่เป็นที่น่าดู

/* Different transitions per property */
.card {
    transition:
        box-shadow 0.3s ease-out,
        transform 0.2s ease-out,
        background 0.15s linear;
}

.card:hover {
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
    transform: translateY(-4px);
}

ระยะเวลา transition ขึ้นอยู่กับบริบท สำหรับองค์ประกอบขนาดเล็ก (ไอคอน, ลิงก์) — 150–200 มิลลิวินาที สำหรับองค์ประกอบขนาดใหญ่ (การ์ด, โมดาล) — 250–350 มิลลิวินาที ฟังก์ชัน easing ease-out จะค่อยๆ ทำให้แอนิเมชั่นช้าลงในตอนท้าย สร้างความรู้สึกที่เป็นธรรมชาติ

แนวปฏิบัติที่แนะนำ — ระบุ transition สำหรับแต่ละคุณสมบัติที่มีแอนิเมชั่นแยกต่างหากกัน คุณสมบัติ all สะดวกในระฮะการพัฒนา แต่ในการผลิตจริงควรกำหนดคุณสมบัติเฉพาะสำหรับแอนิเมชั่นเพื่อหลีกเลี่ยงผลกระทบทีไม่คาดคิด

Hover บนอุปกรณ์สัมผัส

บนอุปกรณ์สัมผัส แนวคิดเรื่อง hover ไม่มีอยู่: ไม่มีเคยร์เซอร์ที่สามารถนำไปวงเหนือองค์ประกอปได้ การแตะองค์ประกอบจะเปิดใช้งานคลิกทันที โดยข้ามสถานะ hover ซึ่งทำให้เกิดปัญหาหากอินเทอร์เฟซอาศัยเฉพาะ hover แต่อย่างเดียว

ตามแหล่งข้อมูล StatCounter (2026), 62% ของทราฟิกเว็บทั่วโลกมาจากอุปกรณ์มือถือ การลลไผ้ที่ไม่มี hover บนหน้าจอสัมผัสหมายถึงการสูญเสียการควบคุม UX สำหรัผู้ใช้ส่วนใหญ่

/* Disable hover on touch devices */
@media (hover: none) and (pointer: coarse) {
    .button:hover {
        background: initial;
        transform: none;
    }
}

Media query hover: none ช่วยตรวจจับว่าอุปกรณ์ไม่รองรับการนำเมาส์และชี้ บนอุปกรณ์ดังกล่าว ผลกระทบ hover จะถูกปิดใช้งาน และการโต้ตอบจะอาศัยสถานะ :active และ :focus ทางเลือกอีกอย่าง คือการแสดงเนื้อหา hover เมื่อแตะ (แตะครั้งแรกแสดง hover, แตะครั้งที่สองดำเนินการ) แต่รูปแบบนี้ทำให้ UX แย่ลง

การเข้าถึงของผลกระทบ hover

การเข้าถึงของ hover เป็นประเด็นที่สำคัญที่มักถูกมองข้าม ผู้ใช้ที่นำทางอินเทอร์เฟซด้วยแป้นพิมพ์ไม่สามารถเปิดใช้ :hover ได้ ฟีเจอร์ที่ใช้งานได้ผ่าน hover แต่อย่างเดียวจะไม่สามารถเข้าถึงได้สำหรับพวกเขา

กฎ WCAG 2.2 (Success Criterion 1.4.13 — Content on Hover or Focus): เนื้อหาที่ปรากฏขึ้นเมื่อ hover ต้องสามารถใช้งานได้เมื่อได้รับโฟกัสด้วย หาก hover แสดงข้อมูลเพิ่มเติม (คำแนะนำ, เมนูแบบเลือกลง) ข้อมูลเดียวกันต้องสามารถใช้งานได้เมื่อ :focus

/* Hover + focus for accessibility */
.tooltip-trigger:hover .tooltip,
.tooltip-trigger:focus .tooltip {
    opacity: 1;
    visibility: visible;
}

/* Disable animation for vestibular disorder */
@media (prefers-reduced-motion: reduce) {
    *:hover {
        transition: none;
    }
}

Media query prefers-reduced-motion — เคารพการตั้งค่าระบบของผู้ใช้ หากผู้ใช้ปิดการแอนิเมชั่นในระบบ ผลกระทบ hover ควรใช้งานทันทีโดยไม่มี transition ซึ่งช่วยเหลือคนที่มีความผิดปกติทางหูช่องหูช่องตา

คำแนะนำเพิ่มเติม: อย่าใช้ hover สำหรับฟังก์ชันที่สำคัญ อย่าใช้เฉพาะสีในการสื่อสารข้อมูลเมื่อ hover (เพิ่มไอคอนหรือข้อความ) และตรงสุกับความเพียงพอสำหรับสถานะ hover