:hover活动区域是什么？由元素或基于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的box模型中，但是当我将光标移到nav.sub上方时，nav.sub显示出来。

所以我很好奇:hover活动区域是什么？由元素或基于HTML结构生成的框。我找不到参考资料或规格:(

Answer 1

Selectors itself doesn't define this.某些宿主语言可能会这样做。HTML可以。来自W3C HTML5和WHATWG HTML (重点是我的)：

:hover伪类被定义为“当用户使用定点设备指定一个元素时”匹配一个元素。仅出于定义HTML伪类的目的，:hover用户代理必须将一个元素视为用户指定的元素，如果该元素是：

• 用户使用定点设备指示的元素。
• 一种元素，其子元素由用户使用定点设备指示。
• 作为当前匹配的标签元素的label标签控件的元素:hover

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

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

Answer 2

它是基于css属性工作的。这里的不透明度值是1。以前是0。如果不透明度为0，则表示元素在那里可用，但我们看不到。请在谷歌上搜索它的不透明度。

Answer 3

​

.main{
		background: gray;
	}
	.sub{
		display: none;
	}
	.main:hover > .sub{
		display: block;
	}

 <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>

​