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置于叠加层上方

1 个答案: