javascript - 用CSS动态覆盖2个div

Question

我有 2 个 div，我需要在用户操作后遮盖它们。 div 只是两个相邻的 div:

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

这是通过 jQuery 显示的 CSS:

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

事件触发时是这样的:

底部的白色区域也需要动态覆盖。

我想采用的方法是将两个 div 包装在另一个 div 中，但它破坏了所有内容的外观。所以我试图根据尺寸使顶部 div 更长，但它仍然不完美......

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

这主要适用于所有尺寸的屏幕，但如果您更改缩放比例，它仍然会导致问题。

我怎样才能使这两个 div 都被 CSS 动态覆盖？

编辑:

这是完整的 HTML，其中添加了包装器和生成的图像:

                <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

既然您使用的是 Jquery，为什么不给 div 一个单独的类，然后使用 .wrapAll 创建一个包装器...然后将叠加层放置在该包装器之上。

$(".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>