אפקט פוקוס של גלריית CSS טהור עם :not

לעתים קרובות בעבר, הייתי צריך להבין איך להוסיף סגנונות לכל האלמנטים בתוך המיכל אבל לֹא המרחף.

אפקט זה מחייב בחירת האחים של אלמנט מרחף. נהגתי להחיל JavaScript בשביל זה, להוסיף או להסיר את המחלקה שהגדירה את כללי ה-CSS המתאימים mouseenter ו mouseleave אירועים, בדומה לזה:

למרות שהקוד עושה את העבודה, תחושת הבטן שלי תמיד אמרה לי שחייבת להיות דרך CSS טהורה להשיג את אותה תוצאה. לפני כמה שנים, תוך כדי עבודה על סליידר מסוים עבור החברה שלי, הגעתי לפתרון דומה לזה איך כריס ג'ילהוד שיחזר את האנימציה המפורסמת של דף הבית של נטפליקס והבנתי שאני לא צריך JavaScript בשביל זה יותר.

לפני כמה חודשים ניסיתי ליישם את אותה גישה לפיד מבוסס רשת באתר החברה שלי, ו- בום - זה לא עבד בגלל הפער בין האלמנטים!

למזלי, נראה שזה לא חייב להישאר ככה, ושוב לא הייתי צריך JavaScript בשביל זה.

סימון ובסיס CSS

בואו נתחיל בקידוד על ידי הכנת הסימון המתאים:

• .grid הוא מבוסס רשת

  רשימה;

• ו .grid__child אלמנטים הם

ילדים שאנחנו רוצים ליצור איתם אינטראקציה.

הסימון נראה כך:

הסגנון צריך להיראות כך:

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, 15rem);
  grid-gap: 1rem;
}

.grid__child {
  background: rgba(0, 0, 0, .1);
  border-radius: .5rem;
  aspect-ratio: 1/1;
}

קוד דוגמה זה יצור שלושה פריטי רשימה שתופסים שלוש עמודות ברשת.

הכוח של בוררי CSS

עכשיו, בואו נוסיף קצת אינטראקטיביות. הגישה שיישמתי בתחילה התבססה על שני שלבים:

1. ריחוף על המיכל אמור לשנות את הסגנונות של כל האלמנטים בפנים...  
2. ...חוץ מזה שהסמן מרחף ברגע זה.

נתחיל עם אחיזת כל ילד בזמן שהסמן מרחף מעל המיכל:

.grid:hover .grid__child {
  /* ... */
}

שנית, בואו נוציא את הפריט שמרחף כעת ונפחית את ה opacity של כל ילד אחר:

.grid:hover .grid__child:not(:hover) {
  opacity: 0.3;
}

וזה יספיק בצורה מושלמת עבור מיכלים ללא פערים בין רכיבי הילד:

עם זאת, במקרה שלי, לא הצלחתי להסיר את הפערים האלה:

כשהעברתי את העכבר בין האריחים כל האלמנטים של הילדים נמוגים.

מתעלמים מהפערים

אנו יכולים להניח שהפערים הם חלקים מהמיכל שאינם מונחים על ידי ילדיו. אנחנו לא רוצים להפעיל את האפקט בכל פעם שהסמן נכנס למיכל, אלא כשהוא מרחף מעל אחד האלמנטים שבתוכו. האם נוכל להתעלם מהסמן שנע מעל הפערים אם כך? 

כן, אנחנו יכולים, באמצעות pointer-events: none על .grid מיכל ולהחזיר אותם עם pointer-events: auto על ילדיו:

.grid {
  /* ... */
  pointer-events: none;
}

/* ... */

.grid__child {
  /* ... */
  pointer-events: auto;
}

בואו פשוט נוסיף איזה מעבר מגניב על אטימות ויש לנו רכיב מוכן:

זה כנראה אפילו יותר מגניב כשאנחנו מוסיפים עוד אריחים ויוצרים פריסה דו מימדית:

ה-CSS הסופי נראה כך:

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, 15rem);
  grid-gap: 3rem;
  pointer-events: none;
}

.grid:hover .grid__child:not(:hover) {
  opacity: 0.3;
}

.grid__child {
  background: rgba(0, 0, 0, .1);
  border-radius: .5rem;
  aspect-ratio: 1/1;
  pointer-events: auto;
  transition: opacity 300ms;
}

עם 2 שורות קוד נוספות בלבד התגברנו על בעיית הפערים!

בעיות אפשריות

למרות שזהו פתרון קומפקטי, ישנם מצבים שבהם הוא עשוי לדרוש כמה דרכים לעקיפת הבעיה.

למרבה הצער, הטריק הזה לא יעבוד כאשר אתה רוצה שהמכל יהיה ניתן לגלילה, למשל, כמו במעין מחוון אופקי. ה pointer-events: none הסגנון יתעלם לא רק מאירוע הריחוף אלא גם מכל האחרים. במצבים כאלה, אתה יכול לעטוף את .grid במיכל אחר, כמו זה:

<br> סיכום

אני ממליץ לך בחום להתנסות ולנסות למצוא גישה פשוטה ומקורית יותר למשימות שבדרך כלל צפויות להיות בעלות רמה מסוימת של מורכבות. טכנולוגיות אינטרנט, כמו CSS, נעשות חזקות יותר ויותר, ובאמצעות שימוש בפתרונות מקוריים מחוץ לקופסה תוכלו להשיג תוצאות נהדרות ללא צורך בתחזוקת הקוד שלכם ולמסור אותו לספקי הדפדפנים.

אני מקווה שאהבת את המדריך הקצר הזה ומצאת אותו שימושי. תודה!

המחבר בחר את טק חינוך לקבל תרומה במסגרת כתוב עבור תרומות תכנית.