css - 悬停零高度元素 : browser bug?

Question

在处理当用户将鼠标悬停在父菜单项上时(展开)折叠的子菜单时，我遇到了以下问题。考虑以下标记(在 JSFiddle 下方或上方)。

ul {
  max-height: 0;
  overflow: hidden;
  margin: 10px;
  padding: 0;
  border: 10px solid #bada55;
  list-style-type: none;
  transition: border-color .4s;
}
ul:hover {
  max-height: 100px;
  border-color: #de2d26;
}

ul > li {
  padding: 10px;
  pointer-events: auto;
}

.ignorant {
  pointer-events: none;
}

.offset {
  position: relative; /* This is the culprit! */
}

<ul class="ignorant">
  <li>I am ignorant of your pointer.
      If you see me, something went wrong!</li>
</ul>
<ul>
  <li>I am not. Hover me!</li>
</ul>
<ul class="ignorant offset">
  <li>I should be ignorant of your pointer.
      If you see me, something went wrong!</li>
</ul>

设置。 我们这里有三个列表，其中的内容是隐藏的，因为 max-height列表的设置为 0。边框仍然显示，这是预期的行为:元素的高度指令 by default仅适用于元素的内容。

我们通过将 max-height 设置为足够大的值，在悬停列表时显示内容。

现在，我想让列表仅在内容悬停时可见，而不是边框​​。我相信，这应该可以使用 pointer-events 来实现。如上所示。忽略边框上的事件并在列表中的元素上重新启用它们。

问题。到目前为止，一切顺利，这在 Firefox 中运行良好，主要是在 Chrome 中。即，当我定位容器时 relative , 可以触发 Chrome 中内容的悬停。

Firefox 仍然像我预期的那样工作，没有触发悬停。当没有边框时，在 Chrome 中也不再可能触发悬停。

问题。这是 Chrome 中的错误吗？还是没有明确规定应该如何处理，因此未定义行为？我会对以下任何一项感兴趣:
1. 解释我做错了什么，以及为什么；
2. 解释为什么不同的浏览器在这种情况下可以有不同的行为；
3. 简要解释为什么这是一个错误。在这种情况下，我很乐意报告一个。

---

目前，这是通过
测试的• Firefox 52.0.1(64 位 Linux N)；
• Firefox 52.0.2(64 位 Windows N)；
• Internet Explorer 11.0.9600.17031(64 位 Windows N)；
• Chrome 57.0.2987.133(64 位 Linux S、64 位 Windows S)；
• Chromium 57.0.2987.98(64 位 Linux S)。
S 表示显示，N 表示悬停时不显示，当使用相对定位时。

_{感谢 BoltClock通过他们的建设性意见使这个问题变得更好。}

Answer 1

悬停事件在所有浏览器上以相同的方式冒泡，this example 证明了这一点.

ul {
  max-height: 0;
  /* overflow: hidden; */
  margin: 10px;
  padding: 0;
  border: 10px solid #bada55;
  list-style-type: none;
  transition: border-color .4s;
}

ul:hover {
  max-height: 100px;
  border-color: #de2d26;
}

ul > li {
  padding: 10px;
  pointer-events: auto;
  position: relative;
  top: 100px;
  background: yellow;
}

.ignorant {
  pointer-events: none;
}

.offset {
  position: relative;
}

<ul class="ignorant offset">
  <li>Hover me! Testing :hover across browsers...</li>
</ul>

我得出的结论:

• 我们使用什么元素并不重要，重要的是它们的位置和显示属性；
• 当 child 有 position: relative 或 display: inline 时不会发生。

仅当鼠标悬停在子模型覆盖与其父模型相同像素的区域上方时，才会触发悬停。可以在屏幕上的蓝色矩形正上方看到该区域。不要说它是浅绿色什么的，我只是一个简单的程序员，我对颜色一无所知。

Chrome 隐藏子元素是因为其父元素的 overflow: hidden 属性是预期的行为。出乎意料的是 child 的事件框(如果我可以这样称呼的话)仍然“可见”并且悬停在它的 parent 的边界上，就像 overflow: visible 一样。

奇怪的是，正如我之前所说，当 child 有 position: relative 或 display 而不是 block 时，这并没有发生.

根据 W3C :

Once a box has been laid out according to the normal flow or floated, it may be shifted relative to this position. This is called relative positioning. Offsetting a box (B1) in this way has no effect on the box (B2) that follows: B2 is given a position as if B1 were not offset and B2 is not re-positioned after B1's offset is applied.

据我了解，这意味着 position: relative 应该对框没有影响。它已经证明这是一个 Chrome 错误。

至于指针事件。 MDN states :

Note that preventing an element from being the target of mouse events by using pointer-events does not necessarily mean that mouse event listeners on that element cannot or will not be triggered. If one of the element's children has pointer-events explicitly set to allow that child to be the target of mouse events, then any events targeting that child will pass through the parent as the event travels along the parent chain, and trigger event listeners on the parent as appropriate. Of course any mouse activity at a point on the screen that is covered by the parent but not by the child will not be caught by either the child or the parent (it will go "through" the parent and target whatever is underneath).

这意味着 Chrome 不会在其父项的顶部显示子项的事件框，但实际上在其下方。只是事件通过父元素并击中它的子元素。不过，overflow: hidden 不应该发生这种情况。