将焦点 DOM 置于叠加层之上

Question

我正在尝试覆盖整个屏幕，然后在上面弹出一个 DOM，这是一种网页游戏教程，告诉用户他应该按哪个按钮。

如上图所示，我试图将所有内容隐藏在叠加层下，只弹出其上方的红色图标

到目前为止我尝试了什么

我直接在 body 标签下添加了一个 div（这将是叠加层），它的 z-index 将比页面中的其他元素大，并且只有焦点 DOM 将具有比叠加层更大的 z-index

问题

这没有用，因为我有一个 translate 用于 opts-container 元素，删除这个样式对我来说不是一个选项，因为我在所有元素上都使用它。

代码（说明）

$("#veil").hide();
$('.icons-group-s div').on('mouseenter',function(){
  console.log("hovered");
    $("#veil").show();
    })
    
    $("#veil").on('mouseleave', function(){
    console.log("hide");
    $("#veil").hide();
      });

#opts-container {
  width: 100%;
  position: relative;
  transform:translateX(50px)
}

#veil {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
}

.icons-group-s {
  height: 500px;
  text-align: center;
  padding-top: 10px;
  position:absolute;
  top: 0;
}

.icons-group-s div {
  width: 100px;
  height: 100px;
  background: #f00;
  margin-left: 10px;
  display: inline-block;
  position: relative;
}

#policy {
  z-index: 102;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div id="veil">

    </div>

    <div id="opts-container" class="hor menu-bottom">
        <div class="icons-group-s">
            <div id="policy" class="text-under-icon"></div>
            <div id="military" class="text-under-icon" ></div>
            <div id="socity" class="text-under-icon"></div>
            <div id="eco" class="text-under-icon" ></div>
            <div id="inventory" class="text-under-icon" ></div>
         
        </div>
    </div>

我心中可能的解决方案

1- 制作裁剪叠加层

2- 将焦点对象克隆到面纱内 div

3- 聚焦对象的父级并降低子元素的不透明度（解决方法）

即使元素具有 transform 样式，我如何在叠加层上弹出元素？

也许是黑客攻击？

Answer 1

考虑元素上的大框阴影而不是覆盖：

#opts-container {
  width: 100%;
  position: relative;
  transform:translateX(50px)
}


.icons-group-s {
  height: 500px;
  text-align: center;
  padding-top: 10px;
  position:absolute;
  top: 0;
}

.icons-group-s div {
  width: 100px;
  height: 100px;
  background: #f00;
  margin-left: 10px;
  display: inline-block;
  position: relative;
}

/* Make sure the stacking context is also on the top */
#opts-container:hover {
  z-index:9999;
}
/* make the element on the top and add a big shadow
   100vw + 100vh will make sure that you will cover all the screen
   Or use any other big value
*/
#opts-container:hover  #policy {
  position:relative;
  z-index:9999;
  box-shadow:0 0 0 calc(100vw + 100vh) rgba(0,0,0,0.5);
}

    <div id="opts-container" class="hor menu-bottom">
        <div class="icons-group-s">
            <div id="policy" class="text-under-icon"></div>
            <div id="military" class="text-under-icon" ></div>
            <div id="socity" class="text-under-icon"></div>
            <div id="eco" class="text-under-icon" ></div>
            <div id="inventory" class="text-under-icon" ></div>
         
        </div>
    </div>

将焦点 DOM 置于叠加层之上

Focus DOM above overlay

html

javascript

css

jquery

overlay