動態覆蓋2個CSS的div

我有2個div，我需要在用戶操作後遮陰。的div緊挨着對方只是兩個div：動態覆蓋2個CSS的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中，但它打破了一切的外觀。所以，我試圖讓頂格再根據關大小，但它仍然不是很完美......

  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>

來源

2015-12-02 David Tunnell

我們真的很需要一個短暫的* *演示...的包裝將是最簡單的，但不知道爲什麼「*它打破了一切的樣子」 *很難更很有幫助。 –

我如何提供演示？我來自C＃背景。 –

好像你正在做的工作比必要的要多。如果你想打包你想要在父div中覆蓋的div，請修改你的CSS來說明這個div，這樣它就不會破壞任何東西的外觀。或者在前面的div之後插入第二個div，這樣它就不會包裝，只是一個兄弟姐妹，並將其定位以覆蓋它們。 – AtheistP3ace

由於您使用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>

來源

2015-12-02 16:31:15

結果：http：//imgur.com/QyLyl0i –

動態覆蓋2個CSS的div

回答

相關問題