html - :hover active area? 元素生成的框或基于html结构的框是什么

Question

nav {
  background: #eee;
  position: relative;
  a {
    display: inline-block;
    padding: 10px;
  }
  > nav {
    position: absolute;
    opacity: 0;
    width: 100%;
    a {
      display: block;
    }
  }
}
.main:hover > .sub {
  opacity: 1;
}

<nav class="main">
  <a href="#">Menu 1</a>
  <a href="#">Menu 2</a>
  <a href="#">Menu 3</a>
  <nav class="sub">
    <a href="#">Menu 2-1</a>
    <a href="#">Menu 2-2</a>
  </nav>
</nav>

从上面的代码片段我们可以看出，nav.sub 是一个绝对元素，不包含在 nav.main 的框模型中，但是当我将光标移到 nav.sub 上方时，nav.sub 会出现。

所以我很好奇 :hover 事件区域是什么？由元素或基于 HTML 结构生成的框。我找不到引用资料或规范 :(

Answer 1

Selectors itself doesn't define this.一些宿主语言可能会这样做。 HTML 确实如此。来自 W3C HTML5和 WHATWG HTML (强调我的):

The :hover pseudo-class is defined to match an element "while the user designates an element with a pointing device". For the purposes of defining the :hover pseudo-class only, an HTML user agent must consider an element as being one that the user designates if it is:

• An element that the user indicates using a pointing device.

• An element that has a descendant that the user indicates using a pointing device.

• An element that is the labeled control of a label element that is currently matching :hover.

这意味着，就选择器而言，任何匹配 :has(:hover) 的 HTML 元素也匹配 :hover。无论祖先及其 :hover 后代的实际布局如何，都是如此。

在您的示例中，指定 .main 或 .sub 将导致 .main 匹配 :hover ，从而导致 .sub 匹配复杂的选择器 .main:hover > .sub。