javascript - 与周围空单元格重叠的 css 网格对象上的鼠标悬停事件

Question

这似乎是一个简单的想法，但事实证明过于复杂。我试图有两个重叠的网格对象，一个在另一个的顶部在一个固定的位置。我想在任一重叠网格中的非空单元格上注册鼠标悬停事件。

在这个例子中，我有两个重叠的网格。然而，mouseevent 只为最上面的网格元素触发，即使有空单元格。因此，例如，如果我将光标放在红色方 block 上，则不会触发鼠标事件，但对于蓝色方 block ，它会触发。

有关如何解决此问题的任何想法或解决方法。谢谢!

$(".elem1").mouseenter(function() {
    console.log("elem1");
})

$(".elem2").mouseenter(function() {
    console.log("elem2");
})

.container1 {
    position:fixed;

    display: grid;

    width: 100%;

    grid-template-columns: 20px 100px 1fr;
    grid-template-rows: 100px;
    grid-template-areas: ". elem1 .";
}

.container2 {
    position:fixed;

    display: grid;

    width: 100%;

    grid-template-columns: 50px 100px 1fr;
    grid-template-rows:100px;
    grid-template-areas: ". elem2 .";
}

.elem1 {
    background-color: red;
    grid-area: elem1;
}

.elem2 {
    background-color: blue;
    grid-area: elem2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container1"><div class="elem1"></div></div>
<div class="container2"><div class="elem2"></div></div>

Answer 1

即使顶部网格的某些部分在视觉上是空的，它们仍然接收鼠标事件并妨碍其后面的事情。

你可以这样做:

.container2 { pointer-events: none }
.elem2 { pointer-events: visible }

使 .container2 的空白部分不可点击，而 .elem2 保持可点击。这在 IE 中不起作用。