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

关键是红色部分是我想要注册鼠标悬停事件的部分。但是紧挨着前面的 div，从左到右，也与红色区域重叠! :( 绿色部分是本身包含背景的 div。知道如何将所有红色 div 放到绝对前面吗？

(我这样做的唯一原因是因为客户想要“卡片”，上面挂着剑、枪、 ARM 等东西，然后主 div 的宽度必须更大并且双方都有负边距)

屏幕:

fiddle 示例:https://jsfiddle.net/9yy2csvd/

问题:

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

类.game的div的每个背景看起来是这样的:

我需要只有当我将鼠标光标移到“卡片”本身上时，而不是它周围的透明背景(包括伸出“卡片”的图片部分)时，事件才会被触发。

Answer 1

这很复杂。

z-index 通常何时工作？

z-index 在具有 z-index 的最近父级范围内工作。换句话说，如果这个 child 的 parent 设置了 z-index，您永远不能让 child 高于其他 parent 。

追逐

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

1. 父级的任何z-index
2. 父级的任何转换
3. 父级的任何过滤器

事实证明，上面列表中的每个属性都会破坏结果。

例子

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 的属性可以正常工作。我会留下详细的测试供您执行! ;-)

祝你有美好的一天!
~维克托