克隆新圖層

Question

我有一個DIV容器。我需要用另一個半透明層覆蓋它。所以，這樣我想我能做到這一點是通過以下幾個步驟：

1. 克隆初始元素
2. 從克隆的元素
3. 申請半透明的克隆清除患兒
4. 得到的位置初始元素
5. 位置克隆

這裏是我的代碼：

$('.myEm').clone().empty().addClass('semi').height(initEmHeight).insertAfter(this).css({ 'top' : pos.top + 'px', 'left' : pos.left + 'px', 'z-index' : '99'}); 

它工作，直到我開始添加CSS。我錯過了什麼？

Answer 1

您可以使用CSS僞元素創建覆蓋圖，如下所示，無需手動克隆或定位。例如：

$("button").click(function() { 
 
    $(this).parent().addClass("overlay"); 
 
    alert("click"); 
 
});

#content { 
 
    position: relative; 
 
    width: 150px; 
 
    height: 100px; 
 
    background: dodgerblue; 
 
} 
 
#content.overlay::after { 
 
    content: ""; 
 
    display: block; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    background: rgba(255, 255, 255, 0.5); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="content"> 
 
    <button>click!</button> 
 
</div>

您可以通過添加和刪除#content類overlay控制覆蓋。