<>Hover Effect là hiệu ứng xảy ra khi người dùng di chuột (hover) vào một phần tử UI. Nó giúp tạo phản hồi trực quan, nâng cao trải nghiệm người dùng (UX) và làm giao diện (UI) trở nên sinh động hơn.
📌 Ví dụ ứng dụng Hover Effect:
✔ Nút bấm (button) thay đổi màu khi di chuột vào.
✔ Ảnh phóng to hoặc làm mờ khi hover.
✔ Hiển thị tooltip khi di chuột vào biểu tượng.
/Các loại Hover Effects phổ biến 🖱️
📌 1. Hover Effect cho Button (Nút bấm)
👉 Khi hover, nút có thể đổi màu, thay đổi bóng đổ hoặc thêm animation.
📌 Hiệu ứng: Khi di chuột vào, màu nền của nút sẽ đậm hơn.
📌 2. Hover Effect cho Link (Liên kết 🔗)
👉 Khi hover vào liên kết, có thể đổi màu, gạch chân, hoặc hiệu ứng underline animation.
📌 Hiệu ứng: Khi hover, liên kết đổi màu từ xanh sang đỏ cam và có gạch chân.
📌 3. Hover Effect cho Ảnh (Image Hover)
👉 Khi hover vào ảnh, có thể phóng to (zoom), làm mờ, hoặc thêm overlay.
📌 Hiệu ứng: Khi hover, ảnh sẽ phóng to 10%.
📌 4. Hover Effect cho Card (Thẻ nội dung 📦)
👉 Khi hover vào card, có thể tạo hiệu ứng đổ bóng, nâng lên hoặc làm nổi bật viền.
📌 Hiệu ứng: Khi hover, card sẽ nâng lên nhẹ và có đổ bóng mạnh hơn.
📌 5. Hover Effect cho Tooltip (Gợi ý nội dung 🏷️)
👉 Khi hover vào một phần tử, hiển thị tooltip với thông tin bổ sung.
📌 6. Hover Effect cho Icon (Biểu tượng 🎨)
👉 Khi hover vào icon, có thể thay đổi màu sắc hoặc rung nhẹ (shake animation).
📌 Hiệu ứng: Khi hover, icon đổi màu từ xám sang xanh dương.
/UX Best Practices cho Hover Effects 🎨
✅ Sử dụng hiệu ứng tinh tế, không lạm dụng
✔ Không dùng hiệu ứng quá phức tạp gây mất tập trung.
✔ Tránh hover có thời gian phản hồi quá chậm.
✅ Tối ưu trên Mobile
✔ Trên mobile không có hover, nên thay thế bằng hiệu ứng tap hoặc focus.
✔ Ví dụ: Khi tap vào button, có thể thay đổi màu trong 0.2s.
✅ Sử dụng hiệu ứng có mục đích
✔ Hover giúp hướng dẫn và phản hồi cho người dùng (ví dụ: thay đổi màu nút khi hover giúp người dùng biết nó có thể click).
✔ Tránh hiệu ứng hover chỉ để “làm đẹp” mà không có giá trị UX.
✅ Kiểm tra khả năng tiếp cận (Accessibility – A11Y)
✔ Một số người dùng không thể sử dụng chuột, nên cần hỗ trợ cả keyboard (:focus) bên cạnh hover.
