1 सवाल: होवर / फ़ोकस स्थिति प्रारंभ में पेज लोड पर सक्रिय होती है

पर बनाया गया सवाल Wed, May 8, 2019 12:00 AM

मेरे पास एक मॉड्यूल है जो हॉवर या फ़ोकस स्टेट्स के माध्यम से जुड़ने पर सामग्री को दिखाता /छुपाता है।

जब आप पहली बार पृष्ठ पर आते हैं, तो मैं पहले खंड में छिपी हुई सामग्री को देखना चाहता हूं, और उसके बाद जब कोई उपयोगकर्ता मॉड्यूल के साथ जुड़ता है, तो उसकी वर्तमान कार्यक्षमता हो जाती है।

मैंने .color:first-child का उपयोग करके सीएसएस के माध्यम से इस खंड को अलग करने की कोशिश की है - आप उस अनुभाग के चारों ओर एक लाल बॉर्डर देखेंगे जिसे मैं नीचे दिए गए कोडपेन के भीतर पेज लोड पर विस्तारित करना चाहता हूं।

https://codepen.io/ckatz/pen/XQaKdB

क्या यह ऐसा कुछ है जिसे केवल CSS में पूरा किया जा सकता है, या JS या JQuery को नियोजित करने की आवश्यकता होगी?

    
0
1 उत्तर                              1                         

आप होवर कक्षाओं के समान शैलियों के साथ एक 'सक्रिय' वर्ग बना सकते हैं और इसे केवल पहले एक पर लागू कर सकते हैं, लेकिन यह मॉड्यूल के साथ बातचीत पर नहीं हटाया जाएगा। आप उन्हें चुनने के लिए सिबलिंग सिलेक्टर्स का उपयोग कर सकते हैं जबकि दूसरे डिव को फोकस /हॉवर किया जाता है, लेकिन जब उपयोगकर्ता कहीं और जाता है तो यह वापस आ जाएगा। अंतत: आपको यह पता लगाने के लिए JS की आवश्यकता होगी कि कुछ को होवर किया गया /क्लिक किया गया और स्थायी रूप से शैलियों को हटा दिया गया।

.color:hover, .color.active {
    /* Change the flex-basis so that we know what
    size to transition to on hover. Arbitrary,
    based on our design/content.
  */
    flex-basis: 20em;
}

.color:hover .details, .color.active .details {
    opacity: 1;
}

और कुछ जेएस जो कक्षा को हटाने के लिए माउसओवर का पता लगाता है, लेकिन आप क्लिक और /या जो भी अन्य इवेंट आवश्यक हैं, उसका उपयोग कर सकते हैं:

const module = document.getElementsByClassName('color-list')[0];
module.addEventListener('mouseover', function() {
  const firstBox = document.getElementsByClassName('light-brown-55')[0];
  firstBox.classList.remove('active');
})

मैंने एक कार्यशील कांटा बनाया यहां

    
2
2019-05-08 16: 44: 18Z
स्रोत रखा गया यहाँ