如何更改元素樣式中的顯示屬性隱藏/顯示它？

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>