克隆新图层

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伪元素创建叠加层，如下所示，无需手动克隆或定位。例如：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

您可以通过在overlay添加和删除课程#content来控制叠加层。