Wie fügt man allen Elementen des Elements css style gleichzeitig hinzu?

Question

Wie zum Beispiel:

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

Und wie kann ich CSS-Stil für die Kinder von "moustOut" am gleichen time.Eg gelten:

mit einem click event .the css('opacity',1) zum "a","b","d" zur gleichen Zeit anwenden könnte .oder, schließen Sie "b" aus.

Answer 1

Dies könnte eine schmutzige Lösung sein, aber es sollte funktionieren:

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

Für alle, aber die b Element auszuschließen, versuchen Sie dies:

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

Wiedergabe mit dem Code, wie ich gerade eingegeben das ist aus der Spitze meines Kopfes, also garantiere ich nicht, dass es funktionieren wird.

Viel Glück!

Answer 2

Sie können rgba verwenden, um die Deckkraft pro Element festzulegen. Schauen Sie sich http://www.css3.info/preview/rgba/

Answer 3

etwas weniger Code

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

und ausschließen ".B"

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

oder alternativ, wenn sie nicht die Trübung verursachen, die versteckten/keine

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

Answer 4

Haben Sie überlegt, eine 100% CSS-Methode zu verwenden?

Als Nick Craver wies darauf hin: "Die Kinder können nicht eine größere Opazität dann ihre Eltern haben, warum nicht die Opazität nur gesetzt, auf dem .mostOut Element?"

HTML

<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> 

CSS

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

• jsFiddle demo 1

Oder die CSS-Child Selector (gleiche HTML wie oben) verwenden:

CSS

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

• jsFiddle demo 2