用CSS

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都包含在哪里？

编辑：

这是完整的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创建一个包装器...然后将叠加层放在其上面。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;