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附加到正文或#content外的其他div。

当你为css中的元素设置不透明度时，他的所有孩子都有相同的。在你的例子中，＃splash的不透明度为.4，就像#content。

一样

尝试$（'body'）。追加而不是$（'＃content'）。追加

独立于父元素设置子元素的不透明度

1 个答案: