एक ही समय में तत्व के सभी बच्चों को सीएसएस शैली कैसे जोड़ें?

Question

जैसे:

<div class="mostOut"> 
    <div class="a"> 
     <h3 class="b"></h3> 
     <div class="d"></div> 
    </div> 
</div> 

और कैसे मैं एक ही time.Eg पर "moustOut" के बच्चों के लिए सीएसएस शैली लागू कर सकते हैं: एक click event व्याप्ति css('opacity',1) साथ

एक ही समय में "a","b","d" पर लागू हो सकते या, "b" को बाहर करें।

Answer 1

यह एक गंदा समाधान हो सकता है, लेकिन यह काम करना चाहिए:, कोड के साथ

$('.mostOut').click(function() 
{ 
    $(this).find('*').not('.b').each(function() 
    { 
    $(this).css('opacity', 1); 
    }); 
}); 

प्ले के रूप में मैं अभी टाइप:

$('.mostOut').click(function() 
{ 
    $(this).find('*').each(function() 
    { 
    $(this).css('opacity', 1); 
    }); 
}); 

सभी लेकिन b तत्व को छोड़कर के लिए, यह कोशिश यह मेरे सिर के शीर्ष से दूर है, इसलिए मैं गारंटी नहीं दे रहा हूं कि यह काम करेगा।

शुभकामनाएं!

Answer 2

आप प्रति तत्व अस्पष्टता सेट करने के लिए आरजीबीए का उपयोग कर सकते हैं। http://www.css3.info/preview/rgba/

Answer 3

थोड़ा कम कोड

$('.mostOut').click(function() 
{ 
    $(this).children("*").css('opacity', 1); 
}); 

की जाँच करें और ".b"

$('.mostOut').click(function() 
{ 
    $(this).children("*").not(".b").css('opacity', 1); 
}); 

या वैकल्पिक रूप से बहिष्कृत कर सकते हैं अपनी नहीं अस्पष्टता छिपा/कोई भी

$('.mostOut').click(function() 
{ 
    $(this).children("*").show(); 
}); 

Answer 4

के कारण क्या आपने 100% सीएसएस विधि का उपयोग करने पर विचार किया है?

के रूप में निक Craver ने कहा: "बच्चे अधिक से अधिक अस्पष्टता तो उनके माता-पिता नहीं हो सकता, क्यों केवल .mostOut तत्व पर अस्पष्टता सेट नहीं?"

एचटीएमएल

<div class="mostOut"> 
    div class mostOut 
    <div class="a"> 
    div class a 
    <h3 class="b">h3 class b</h3> 
    <div class="d">div class d</div> 
    </div> 
</div> 

सीएसएस

.mostOut{ 
    opacity:0.5; 
} 
.mostOut:active{ 
    opacity:1; 
} 

• jsFiddle demo 1

या, सीएसएस बाल चयनकर्ता (समान के रूप में ऊपर एचटीएमएल) का उपयोग करें:

सीएसएस

.mostOut:active > div{ 
    border:solid 1px gray; 
    opacity:0.5; 
} 

• jsFiddle demo 2