Question

＆＃13;

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

＆＃13;

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

＆＃13;

正如我们从上面的代码片段中看到的那样，nav.sub是一个绝对元素，并不包含在nav.main的盒子模型中，但是当我将光标移动到nav.sub上方时，nav.sub会显示出来

所以我只是好奇什么是：悬停活动区域？元素生成的框或基于HTML结构的框。我找不到参考或规格:(

Answer 1

Selectors itself doesn't define this.某些主机语言可能会这样做。 HTML确实如此。来自W3C HTML5和WHATWG HTML（强调我的）：

:hover伪类被定义为匹配元素＆＃34;而用户指定具有指点设备的元素＆＃34;。出于仅定义:hover伪类的目的，HTML用户代理必须将元素视为用户指定的元素，如果它是：



用户使用指点设备指示的元素。



具有用户使用指点设备指示的后代的元素。



一个元素，它是当前与label匹配的:hover元素的标记控件。

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

在您的示例中，指定.main或.sub会导致.main与:hover匹配，从而导致.sub与复杂选择器{{1}匹配}}

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>

什么是：悬停活动区域？元素生成的框或基于html结构的框

3 个答案: