CSS：DIV重叠，z-index无法修复

Question

这是我的HTML：

<div id="body">
  <div id="body-inner">
    <div class="game" id="csgo" onclick="window.location='https://csgo.fraid.gg/'"><div class="game-handle"></div></div>
    <div class="game" id="minecraft" onclick="window.location='https://mc.fraid.gg/'"><div class="game-handle"></div></div>
    <div class="game" id="lineage" onclick="window.location='https://l2.fraid.gg/'"><div class="game-handle"></div></div>
  </div>
</div>

这是我的css：

.game {
  width: 807px;
  height: 607px;
  filter: drop-shadow(10px 10px 32px black) opacity(50%) grayscale(80%);
  margin: auto;
  margin-left: -220px;
  margin-right: -220px;
  transform: scale(0.7,0.7);
  transition: 150ms ease-in-out;
  position: relative;
  z-index: 99;
}
.game#csgo {
  background: url('game-csgo.png') no-repeat rgba(0,255,0,0.5);
  background-size: 100%;
}
.game#minecraft {
  background: url('game-minecraft.png') no-repeat rgba(0,255,0,0.5);
  background-size: 100%;
}
.game#lineage {
  background: url('game-l2.png') no-repeat rgba(0,255,0,0.5);
  background-size: 100%;
}
.game.hover {
  filter: drop-shadow(20px 20px 64px black) opacity(100%) grayscale(0%);
  transform: scale(1,1);
  transition: 150ms ease-in-out;
}
.game-handle {
  width: 411px;
  height: 525px;
  cursor: pointer;
  position: fixed;
  bottom: 0;
  left: 198px;
  z-index: 99999;
  background: rgba(255,0,0,1);
}

用于切换.hover类的jQuery脚本：

jQuery(function() {
  jQuery('.game-handle').mouseenter(function() {
    jQuery(this).parent('.game').addClass('hover',0);
  }).mouseleave(function() {
    jQuery(this).parent('.game').removeClass('hover',0);
  });
});

事情是RED部分是我想要注册鼠标悬停事件的东西。但是前面的div从左到右依次与RED区域重叠！ :(绿色部分是持有背景本身的div。任何想法如何将所有RED div带入绝对前线？

（我这样做的唯一原因是因为定制者希望有“卡片”，其中有东西悬挂在他们身上，如剑，枪，手臂和东西，然后主要的div必须更宽并且双方都有负差距）

屏幕：

小提琴示例：https://jsfiddle.net/9yy2csvd/

问题：

光标位于红色部分，但右侧div的绿色与其重叠（未触发鼠标中心事件）。所以你必须用光标向左移动更多，这样你才能触摸红色部分（并触发事件）。但我需要它，红色部分位于所有绿色之上，

带有.game类的div的每个背景都是这样的：

只有当我将鼠标光标移动到“卡片”本身而不是它周围的透明背景（包括图片中突出“卡片”的部分）时，才需要触发该事件。

Answer 1

这很复杂。

z-index通常有效吗？

z-index在与z-index最近的父级范围内工作。换句话说，如果这个孩子的父母设置了z-index，你就永远不会让孩子高于其他父母。

追逐

根据我的个人测试，我得出结论，只要您不使用以下任何，您确实可以达到预期的效果：

1. 父母的任何z-index
2. 父母的任何transform
3. 父母的任何filter

结果显示上面列表中的每个属性打破结果。

实施例

z-index何时起作用或不起作用的变量很多。我准备了一个测试环境供您试用。请注意它何时中断以及您可以应用什么属性来修复它。

$(function() {
  $('body').addClass('child-relative'); // Simplest combination when it works
  
  $('label input').click(function() {
    var className = $(this).data('class');
    $('body').toggleClass(className);
  }).each(function() {
    var className = $(this).data('class');
    $(this).attr({
      checked: $('body').hasClass(className)
    });
  });
});

/*/ "Works" = .child is above all .parent-s /*/

/*/ Basic styles /*/
.parent {
  outline: 2px dotted blue;
  background: rgba(0, 0, 255, .2);
  width: 200px;
  height: 200px;
  float: left;
  
  margin-right: -50px;
}

.child {
  background: yellow;
  outline: 2px dashed red;
  width: 150px;
  height: 150px;
  margin: 25px;
}

/*/ Variables /*/
.parent-relative .parent {
  /* Works when .child has position: relative/absolute; AND z-index > 0 */
  position: relative;
}

.parent-z-index .parent {
  /* Never works */
  z-index: 0;
}

.parent-transform .parent {
  /* Never works */
  transform: scale(1);
}

.parent-transform-rotate .parent {
  /* Never works */
  transform: rotate(360deg);
}

.parent-filter .parent {
  /* Never works */
  filter: opacity(100%);
}

.child-relative .child {
  /* Works when .parent has only position: static; OR when .child has z-index as well */
  position: relative;
}

.child-z-index .child {
  /* Works when .parent has position: static; OR position: relative; WITHOUT z-index */
  z-index: 1;
}

.child-transform .child {
  /* Doesn't matter */
  transform: scale(1);
}

.child-transform-rotate .child {
  /* Doesn't matter */
  transform: rotate(360deg);
}

.child-filter .child {
  /* Doesn't matter */
  filter: opacity(100%);
}

/*/ Ignore following code /*/
h2 {
  margin-bottom: 0;
}
.parent {
  margin-top: 20px;
}
.controls .bad {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<h2><code>.parent { }</code></h2>
<div class="controls">
  <label>
    <input type="checkbox" data-class="parent-relative">
    <code>position: relative;</code>
  </label>
  <label class="bad">
    <input type="checkbox" data-class="parent-z-index">
    <code>z-index: 0;</code>
  </label>
</div>
<div class="controls">
  <label class="bad">
    <input type="checkbox" data-class="parent-transform">
    <code>transform: scale(1);</code>
  </label>
  <label class="bad">
    <input type="checkbox" data-class="parent-transform-rotate">
    <code>rotate: scale(360deg);</code>
  </label>
  <label class="bad">
    <input type="checkbox" data-class="parent-filter">
    <code>filter: opacity(100%);</code>
  </label>
</div>
<h2><code>.child { }</code></h2>
<div class="controls">
  <label>
    <input type="checkbox" data-class="child-relative">
    <code>position: relative;</code>
  </label>
  <label>
    <input type="checkbox" data-class="child-z-index">
    <code>z-index: 1;</code>
  </label>
</div>
<div class="controls">
  <label>
    <input type="checkbox" data-class="child-transform">
    <code>transform: scale(1);</code>
  </label>
  <label>
    <input type="checkbox" data-class="child-transform-rotate">
    <code>rotate: scale(360deg);</code>
  </label>
  <label>
    <input type="checkbox" data-class="child-filter">
    <code>filter: opacity(100%);</code>
  </label>
</div>

<div class="parent">
  <div class="child">
    Child 1
  </div>
</div>
<div class="parent">
  <div class="child">
    Child 2
  </div>
</div>
<div class="parent">
  <div class="child">
    Child 3
  </div>
</div>

请注意，我仅在Windows上的Chrome中对此进行了测试。也许在其他环境中，标记为.bad的属性可以正常运行。我会给你详细的测试表演！ ; - ）

祝你有愉快的一天！ 〜Wiktor的