Установка непрозрачности дочернего элемента независимо от родительского элемента - PullRequest
Новая
       6

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

0 голосов
/ 27 января 2011

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

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

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

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

1 Ответ

2 голосов
/ 27 января 2011

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

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

Попробуйте $ ('body'). Append вместо $ ('# content'). Append

...