html - 更改元素样式中的显示属性如何隐藏/显示它？

Question

我正在关注 this关于如何创建 CSS 下拉菜单的教程。目前所述方法不使用任何 JavaScript(仅 HTML 和 CSS)。这是建议的方法，不包括颜色/背景颜色/字体/等。

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
}

.dropdown-content a {
    display: block;
}

.dropdown:hover .dropdown-content {
    display: block;
}

<div class="dropdown">
    <button class="dropbtn">Dropdown</button>
    <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
    </div>
</div>

如您所见，下拉按钮出现，当鼠标悬停在它上面时，列表项就会显示出来。将鼠标悬停在元素上时应用的唯一样式是

.dropdown:hover .dropdown-content {
    display: block;
}

这是如何运作的？ (w3schools 教程没有描述显示样式背后的原因)

当我运行上面的代码片段时，我期望列表项以内联方式显示，然后，当按钮悬停在按钮上方时，显示为按钮下方的一个 block (因此我期望列表项永远不会隐)。是什么让这些列表项默认隐藏？

此外，如果我在 div 元素(具有类下拉列表的元素)上应用 display: block 样式，那么当我将鼠标悬停在按钮下方的空白区域时，怎么会这样呢？但是在列表文本的右侧，display: block 样式被取消了(并且列表项消失了)？我希望 div 元素占据一个矩形形状的区域(即使悬停在矩形的白色部分上也会触发 :hover)。 *

* 我可能需要澄清我的问题的整个部分，如果需要请说明。

Answer 1

.dropdown-content 默认隐藏:

.dropdown-content {
  display: none;
}

当指针悬停在父 .dropdown 上时，后面的规则会覆盖它并显示内容:

.dropdown:hover .dropdown-content {
  display: block;
}

此规则适用于 .dropdown 中处于 hover 状态的任何 .dropdown-content。

要回答第二个问题，是因为 position: absolute 子项旁边的空白不保持悬停状态。请参阅下面的代码片段，其中包含显示每个元素边界的轮廓。只要指针位于蓝色(父)框或红色(子)框内，就会保持悬停状态。

.dropdown {
    position: relative;
    display: inline-block;
    outline: solid 1px blue;
}

.dropdown-content {
    display: none;
    position: absolute;
    outline: solid 1px red;
}

.dropdown-content a {
    display: block;
    background: yellow;
}

.dropdown:hover .dropdown-content {
    display: block;
}

<div class="dropdown">
    <button class="dropbtn">Dropdown</button>
    <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
    </div>
</div>