:focus-within - הפתרון האלגנטי לניווט במקלדת
ב-CSS מודרני, :focus-within הוא אחד הכלים החשובים ביותר ליצירת חוויית משתמש נגישה ואיכותית למשתמשי מקלדת. למרות שהוא אכן דומה ל-:hover, הוא מציע יכולות ייחודיות שהופכות אותו לחיוני עבור נגישות וחוויית משתמש מתקדמת.
מה זה :focus-within ואיך הוא עובד?
:focus-within הוא pseudo-class שמופעל כאשר אלמנט או אחד מצאצאיו מקבל פוקוס. זה אומר שהמחלקה תישאר פעילה גם כאשר המשתמש נווט בין שדות שונים בתוך אותו קונטיינר.
הבדלים מרכזיים מ-:hover
בעוד ש-:hover מגיב לתנועת העכבר, :focus-within מגיב לפוקוס של המקלדת. ההבדלים החשובים:
:hover:
- מופעל בעת רחיפה עם העכבר
- נעלם מיד כשהעכבר עוזב את האזור
- לא נגיש למשתמשי מקלדת בלבד
:focus-within:
- מופעל כאשר אלמנט בתוך הקונטיינר מקבל פוקוס
- נשאר פעיל כל עוד הפוקוס בתוך הקונטיינר
- נגיש גם למשתמשי מקלדת וגם לעכבר
דוגמא מעשית לשימוש - פתיחת תת תפריט
