使用CSS动态覆盖2个div

Question

I have 2 divs that I need a shade over after a user action. The divs are just two divs next to each other:

<div class="bought">content</div>
<div class="class2">content</div>

Here is the CSS which is made visible via jQuery:

#view-hint .body > .img .bought {
    display:none;
    cursor:pointer;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index:2;
    background: rgba(0,0,0,0.75);
}

When the event fires this is what it looks like:

That bottom white area needs to be covered dynamically as well.

The approach I thought to take was to wrap both div's in another div but it breaks the look of everything. So I tried to make the top div longer based off size but it's still not perfect...

            var originalHeight = $('.bought').height();
            var windowWidth = $(window).width();
            if (windowWidth < 710) {
                $('.bought').css('height', originalHeight * 0.6);
            } else if (windowWidth > 710 && windowWidth < 1000) {
                $('.bought').css('height', originalHeight * 0.698);
            } else if (windowWidth > 1000 && windowWidth < 1300) {
                $('.bought').css('height', originalHeight * 0.699);
            } else if (windowWidth > 1300 && windowWidth < 1600) {
                $('.bought').css('height', originalHeight * 0.865);
            } else if (windowWidth > 1600 && windowWidth < 2000) {
                $('.bought').css('height', originalHeight * 1.035);
            } else {
                $('.bought').css('height', "662px");
            }

This mostly works for all size screens, but if you change the zoom it still causes issues.

How can I make it where both of these divs are covered by the CSS dynamically?

Edit:

Here is the full HTML with an added wrapper and an image that results:

                <div id="test123">
                    <div class="bought">
                        <div class="row">
                            <div class="col">
                                <div class="body">
                                    <?php if(Request::is('user/*')) { ?>
                                        <div id="boughtquestion">Did you buy this for <?php echo $user->firstName ?>?</div>
                                        <div class="options">
                                            <!-- <a id="boughtyes" class="cbutton whiteonpurple" onclick="markPurchased(event)">Yes</a> -->
                                            <a id="boughtyes" class="cbutton whiteonpurple">Yes</a>
                                            <a id="boughtno" class="cbutton whiteonpurple">No</a>
                                        </div>
                                    <?php } else { ?>
                                        <div>Bought?</div>
                                        <p>Click here to send hinters a message to let them know.<br />And yes, it can still be a surprise!</p>
                                    <?php } ?>
                                    </div>
                            </div>
                        </div>
                    </div>
                    <div class="markedaspurchased">
                        <div class="row">
                            <div class="col">
                                <div  class="body">
                                    <div id="markedpurchased">Marked as Purchased</div>
                                    <p id="markedmessage">Marking as purchased prevents duplicate gift giving. Dont worry <?php echo $user->firstName ?> doesn't get notified but you can let <?php echo ($user->gender == 'female' ? 'him' : 'her') ?> know by sending a message!</p>
                                    <p><a id="sendmessagebutton" class="cbutton whiteonpurple purchasebutton">Send message to let them know</a></p>
                                    <p><a id="anonymousbutton" class="cbutton whiteonpurple purchasebutton">Send anonymous message</a></p>
                                    <p><a id="secretbutton" class="cbutton whiteonpurple purchasebutton">Keep it a secret</a></p>
                                </div>
                            </div>
                        </div>
                    </div>

            </div>

            <p class="description"></info-coverp>

            <div class="options">
                <a class="buy cbutton whiteonpurple" target="_blank">Buy</a>
                <a class="hint cbutton whiteonblack" target="_blank">Hint</a>
            </div>

            <div class="info">
                <div class="bar"></div>
                <div class="rehints">10 REHINTS</div>
                <div class="hinter">
                    <div class="picture monophoto">
                        <div class="text">BO</div>
                        <div class="img" style="background-image: url();" onclick=""></div>
                    </div>
                    <div class="content">
                        <div class="one">Hinted by:</div>
                        <div class="two"><a href=""></a></div>
                    </div>
                </div>
                <div class="partnertext">Partnered Hint</div>
                <div style="clear:both;"></div>
            </div>
        </div>

Answer 1

Since you're using Jquery, why not give the divs a separate class and then use .wrapAll to create a wrapper...then position the overlay on top of that.

 $(".wrapped").wrapAll('<div class="overlay" />'); 

 .overlay { display: inline-block; position: relative; } .overlay::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapped bought">content 1</div> <div class="wrapped class2">content 2</div>