एक शुद्ध सीएसएस गैलरी फोकस प्रभाव के साथ :not

अतीत में अक्सर, मुझे यह पता लगाने की आवश्यकता होती थी कि कंटेनर के अंदर सभी तत्वों में शैलियों को कैसे जोड़ा जाए लेकिन नहीं आच्छादित एक।

इस प्रभाव के लिए एक आच्छादित तत्व के भाई-बहनों का चयन करना आवश्यक है। मैं इसके लिए जावास्क्रिप्ट लागू करता था, उस वर्ग को जोड़ता या हटाता था जिसने उचित सीएसएस नियमों को परिभाषित किया था mouseenter और mouseleave इसी तरह की घटनाएँ:

हालांकि कोड चाल करता है, मेरी आंत की भावना ने हमेशा मुझे बताया कि एक ही परिणाम प्राप्त करने के लिए कुछ शुद्ध-सीएसएस तरीका होना चाहिए। कुछ साल पहले, मेरी कंपनी के लिए एक निश्चित स्लाइडर पर काम करते हुए, मैं इसी तरह के समाधान के साथ आया था कैसे क्रिस गिल्होएड ने प्रसिद्ध नेटफ्लिक्स होमपेज एनीमेशन को फिर से बनाया और मैं समझ गया कि इसके लिए मुझे अब जावास्क्रिप्ट की आवश्यकता नहीं है।

कुछ महीने पहले मैं अपनी कंपनी की वेबसाइट पर ग्रिड-आधारित फ़ीड के लिए उसी दृष्टिकोण को लागू करने की कोशिश कर रहा था और - बूम - तत्वों के बीच की खाई के कारण यह काम नहीं किया!

सौभाग्य से मेरे लिए, ऐसा प्रतीत हुआ कि इसे इस तरह नहीं रहना है, और एक बार फिर मुझे इसके लिए जावास्क्रिप्ट की आवश्यकता नहीं थी।

मार्कअप और बेस सीएसएस

आइए उचित मार्कअप तैयार करके कोडिंग शुरू करें:

• .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;
}

आइए बस अस्पष्टता पर कुछ अच्छा संक्रमण जोड़ें और हमारे पास एक तैयार घटक है:

जब हम अधिक टाइलें जोड़ते हैं और 2-आयामी लेआउट बनाते हैं तो यह शायद और भी अच्छा होता है:

अंतिम सीएसएस इस तरह दिखता है:

.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 दूसरे कंटेनर में, इस तरह:

सारांश

मैं आपको प्रयोग करने के लिए दृढ़ता से प्रोत्साहित करता हूं और उन कार्यों के लिए एक सरल और अधिक मूल दृष्टिकोण खोजने का प्रयास करता हूं, जिनमें आमतौर पर कुछ स्तर की जटिलता होने की उम्मीद होती है। वेब प्रौद्योगिकियां, जैसे सीएसएस, अधिक से अधिक शक्तिशाली हो रही हैं और आउट-ऑफ-द-बॉक्स देशी समाधानों का उपयोग करके आप अपने कोड को बनाए रखने की आवश्यकता के बिना शानदार परिणाम प्राप्त कर सकते हैं और इसे ब्राउज़र विक्रेताओं को सौंप सकते हैं।

मुझे उम्मीद है कि आपको यह छोटा ट्यूटोरियल पसंद आया होगा और यह उपयोगी लगा होगा। धन्यवाद!

लेखक ने चुना टेक शिक्षा के हिस्से के रूप में एक दान प्राप्त करने के लिए दान के लिए लिखें कार्यक्रम.