Setting opacity of child element independently from parent element - html

Question

I set up a fiddle with the following code:
html:
<div id="content">
<input id="splash_button" type="button" value="Splash!" />
<p>OSEIFNSEOFN SOE:NF:SOERNG :SOJld;kkng d;ljrng so;ern gsejng ;seorjse;ongsod;jng;s jdg;ske\ ;sej se gdsrgn sd;orjngsd;oj go;ser o;s en;o jnse;orng;sekorg ;ksjdr ;kgsjurd; gjnsdrgj; s ;hg;kuhg k;sgksdgblsregilsebnvsfdnv sa;kljg ;khg ;zkljdng ;kjsgr; unbzsd;kjgb zk;j xcnbv;kjzb ;kjgrb snbz;gkljznbs;d,jbnzs;dkjvbz;sljbd ;zksjn ;kzjsbng ;kjsbk;zejr ;kgsjg ;kzsjbr ;kjszrb ;zkojg ;oszkrg ;ozsrb;ouszb </p>
</div>
css:
#content{
z-index: 0;
}
javascript(jquery):
$('#splash_button').click(function(){
$('#content').append($('<div id="splash"><a id="hideSplash">hide</a></div'));
// display splash window
var splash_width = 200;
var splash_height = 200;
$('#splash').css({
'z-index': 1,
'width': splash_width + 'px',
'height': splash_height + 'px',
'position': 'absolute',
'left': Math.floor(($(window).width() - splash_width)/2) + 'px',
'top': Math.floor(($(window).height() - splash_height)/2) + 'px',
'z-index': 1,
'border': '1px solid',
'background-color': '#99ccff',
'opacity': '1.0'
});
// set the content's opacity and disabled the input button
$('#content')
.css({
'opacity': '0.4'
})
.children()
.attr('disabled', 'disabled');
// when everything's over, reset properties
$('#hideSplash').click(function(){
$('#splash').remove();
$('#content')
.css({
'opacity': '1.0'
})
.children()
.removeAttr('disabled');
});
});
I expected the splash div to have an opacity of 1, and the content div to have an opacity of 0.4, however, after clicking the button, both divs have an opacity of 0.4.
Any help is much appreciated.

Answer 1

You should append the #splash to the body or another div outside the #content.
When you set an opacity to an element in css, all of his children have the same.
In your exemple the #splash has an opacity of .4 just like the #content.
Try $('body').append instead of $('#content').append