Настройка непрозрачности дочернего элемента независимо от родительского элемента

Question

Я настроил fiddle со следующим кодом:

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'); 
    }); 
}); 

Я ожидал, что splash div будет иметь непрозрачность 1, а содержимое div будет иметь непрозрачность 0,4, однако после нажатия кнопки оба div имеют непрозрачность 0,4.

Любая помощь очень ценится.

Answer 1

Вы должны добавить #splash к телу или другому div вне #content.

Когда вы устанавливаете непрозрачность элемента в css, все его дети имеют то же самое. В вашем примере #splash имеет непрозрачность .4, как и #content.

Попробуйте $ ('тело'). Добавить вместо $ ('# содержание'). Присоединять