Question

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

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

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

$(".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中发挥作用。

Answer 2

我不知道你想要达到什么目标，但正如你所认识的那样 - 一个div与另一个div重叠，所以没有可能发生事件，而是建议你将两个div放在一个网格并使用负边距重叠。

https://jsfiddle.net/awv8evs3/4/

<div class="container"><div class="elem1"></div><div class="elem2"></div></div>

.container {
    position:fixed;
    display: grid;
    width: 100%;
    grid-template-columns: 80px 80px 1fr;
    grid-template-rows: 100px;
}

.elem1 {
    background-color: red;
}

.elem2 {
  margin-left:-60px;
  background-color: blue;
}

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

2 个答案: