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

Question

我正在关注如何创建CSS下拉菜单的this教程。目前所述的方法不使用任何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教程没有描述显示样式背后的原因）

当我运行上面的代码片段时，我期待列表项被内联显示，然后，当按钮悬停时，显示为块下的按钮（因此我期待的列表项永远不会被隐藏）。什么使这些列表项默认隐藏？

此外，如果我在div元素（具有类下拉列表的元素）上应用display: block样式，那么当我将鼠标悬停在物理下面的空白区域时，如何在列表文本的右侧，display: block样式是撤消（和清单项目消失）？我期望div元素占据矩形形状的区域（即使在矩形的白色部分上悬停也会触发：悬停）。 *

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

Answer 1

的.dropdown-content默认是隐藏的：

后来的规则将覆盖并显示内容时，指针悬停在父.dropdown：

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

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

要回答第二个问题，这是因为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>