تأثير التركيز في معرض CSS النقي مع: لا

في كثير من الأحيان في الماضي ، كنت بحاجة إلى معرفة كيفية إضافة أنماط إلى جميع العناصر داخل الحاوية ولكن ليس واحد حوم.

يتطلب هذا التأثير اختيار أشقاء العنصر الذي تم تحريكه فوق العنصر. اعتدت على تطبيق JavaScript لهذا الغرض ، بإضافة أو إزالة الفئة التي حددت قواعد CSS المناسبة عليها mouseenter و mouseleave أحداث مشابهة لهذا:

على الرغم من أن الكود يقوم بالخدعة ، إلا أن شعوري الداخلي أخبرني دائمًا أنه يجب أن تكون هناك طريقة CSS خالصة لتحقيق نفس النتيجة. قبل بضع سنوات ، أثناء عملي على شريط تمرير معين لشركتي ، توصلت إلى حل مشابه لـ كيف أعاد كريس جيلهو إنشاء الرسوم المتحركة الشهيرة لصفحة Netflix الرئيسية وأدركت أنني لست بحاجة إلى JavaScript لهذا بعد الآن.

قبل شهرين كنت أحاول تنفيذ نفس النهج لخلاصة قائمة على الشبكة على موقع الويب الخاص بشركتي و- boom- لم ينجح بسبب الفجوة بين العناصر!

لحسن الحظ بالنسبة لي ، يبدو أنه ليس من الضروري أن يظل هكذا ، ومرة ​​أخرى لم أكن بحاجة إلى 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;
}

مع سطرين إضافيين فقط من التعليمات البرمجية تغلبنا على مشكلة الفجوة!

القضايا المحتملة

على الرغم من أنه حل مضغوط ، إلا أن هناك بعض المواقف التي قد تتطلب بعض الحلول البديلة.

لسوء الحظ ، لن تعمل هذه الخدعة عندما تريد أن تكون الحاوية قابلة للتمرير ، على سبيل المثال ، كما هو الحال في نوع من شريط التمرير الأفقي. ال pointer-events: none سيتجاهل النمط ليس فقط حدث التحويم ولكن جميع الأحداث الأخرى أيضًا. في مثل هذه الحالات ، يمكنك لف ملف .grid في حاوية أخرى ، مثل هذا:

نبذة عامة

أشجعك بشدة على التجربة ومحاولة إيجاد نهج أبسط وأكثر أصالة للمهام التي يُتوقع عادةً أن يكون لها مستوى معين من التعقيد. تزداد قوة تقنيات الويب ، مثل CSS ، وباستخدام الحلول الأصلية الجاهزة ، يمكنك تحقيق نتائج رائعة دون الحاجة إلى الحفاظ على التعليمات البرمجية الخاصة بك والتنازل عنها لبائعي المستعرضات.

آمل أن تكون قد أحببت هذا البرنامج التعليمي القصير ووجدته مفيدًا. شكرًا!

اختار المؤلف ملف تقنية التعليم لتلقي تبرع كجزء من اكتب عن الدول برنامج.