html - 在 CSS 溢出时使用 z-index 将 HTML 元素置于前面

Question

当悬停在溢出容器的元素上时，我试图让蓝色矩形容器具有比其他框更大的z-index。

这里的游戏 3 有更大的 z-index，但我想访问下面蓝色圆圈中的 Loser select，但是我不能，除非我将鼠标悬停返回蓝色矩形以获得焦点。

是否可以通过 CSS 或我需要 JQuery 来解决这个问题？

我创建了一个可以复制它的 Fiddle，因此忽略任何 JS 错误，因为实际页面需要相当多的包含，但问题是完整的。将鼠标悬停在第 4 个游戏上，该游戏具有三个下拉菜单:Source、Pools、Seeds。您可以选择种子就好了。但是，将鼠标悬停在顶部的另一个游戏上，然后返回到“种子”，除非您再次将鼠标悬停在“池”上，否则无法选择它。无论溢出是什么，我都需要始终可选择“种子”。

https://jsfiddle.net/cblaze22/qp4L15tj/8/

游戏悬停的当前代码(蓝色矩形区域)

.forward 在蓝色矩形区域放置一个大的 zindex。

$(element).hover(
                function () {
                    if (!$(this).parent().hasClass('editing')) {
                        $(this).addClass('forward');
                    }
                },
                function() {
                    $(this).removeClass('forward');
                }
            );

Answer 1

一旦您理解了结构和实际问题，这实际上是一个非常简单的修复。 Div 覆盖 div。首先，您禁用 .bracket-part 中所有内容的所有点击事件，因为它们不是必需的。然后将点击事件添加回选择。为了使其更通用以便再次使用，您可以简单地将 CSS 选择器中的 select 更改为类 .re-enable-events 或其他内容。关于 z-index 的 JS 实际上并不需要。

#bracket-wrapper .bracket-part select {
  pointer-events: all !important;
}
#bracket-wrapper .bracket-part {
  pointer-events: none;
}

参见:https://jsfiddle.net/uws8pf1y/

Pointer events具有非常好的兼容性率，因此该解决方案应该适用于几乎所有设备。