हम छद्म वर्ग के सिद्धांत का अध्ययन करते हैं: नहीं () कार्य के उदाहरण का उपयोग करके "शुद्ध सीएसएस में एक तालिका की सक्रिय पंक्ति को हाइलाइट करना"

कुछ दिन पहले, मेरे दोस्त ने उस समस्या को हल करने में मदद मांगी जो उसके साक्षात्कार में थी। साक्षात्कारकर्ता ने उसे निम्नलिखित कोड स्निपेट दिए:

tbody:hover tr { opacity: 0.24; } 

यह भी जोड़ा: “अब, जब आप मेज पर मंडराते हैं, तो सभी पंक्तियाँ फीकी पड़ जाती हैं। और आपको यह सुनिश्चित करने की आवश्यकता है कि आपके द्वारा बताई गई रेखा सक्रिय बनी रहे। ”

निर्णय

वर्तमान समाधान में, जब आप tbody पर होवर करते हैं: होवर तत्व, सभी tr तत्व तुरंत अपनी अस्पष्टता को 0.24 में बदल देते हैं।

 tbody:hover tr { opacity: 0.24; } 

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

इस तरह के कार्यान्वयन के लिए, आपको हॉवर का उपयोग करने की आवश्यकता होगी, न कि छद्म वर्गों का। होवर की मदद से, ब्राउज़र यह निर्धारित करेगा कि लाइन को इंगित किया गया था, और नहीं की मदद से यह समझ जाएगा कि किसी भी शैली को उस पर लागू नहीं किया जाना चाहिए।

 tbody:hover tr:not(:hover) { opacity: 0.24; } 

होम कार्य

समेकित करने के लिए, मैंने एक होमवर्क कार्य तैयार किया जिसमें पाठ में एक छवि प्रदर्शित करते समय एक त्रुटि को ठीक करना आवश्यक है। मैंने निम्नलिखित मार्कअप और शैलियों को तैयार किया:

 <main class="content"> <p>Some text</p> <img src="picture.jpg" alt="some alt"> <p>Some text</p> </main> 

 .content img { margin-top: 35px; margin-bottom: 35px; } 

त्रुटि यह है कि यदि छवि पहला तत्व है, तब भी इसके शीर्ष पर एक मार्जिन है, लेकिन आपको यह सुनिश्चित करने की आवश्यकता है कि यह मौजूद नहीं है।

 <main class="content"> <img src="picture.jpg" alt="some alt"> <p>Some text</p> <p>Some text</p> </main> 

तदनुसार, यदि छवि अंतिम तत्व है, तो आपको नीचे से इंडेंट को निकालने की आवश्यकता है।

 <main class="content"> <p>Some text</p> <p>Some text</p> <img src="picture.jpg" alt="some alt"> </main>