爲什麼在ul和li的情況下懸停行爲不直觀？

Question

我想用紅色突出顯示每個菜單項，同時將鼠標懸停在上面。所以憑我的直覺，我做了.menu ul li: hover{...}。

疑點1：但這個過程中，只有li文本背景改變顏色，而不是li的填充部分。爲什麼padding不是padding也是li元素的一部分？

懷疑2：我通過做.menu ul :hover達到了預期的行爲，如下面的代碼所示。但這與我的直覺背道而馳。不是說整個ul應該在懸停時改變背景顏色，這樣整個菜單項會突出顯示？

驗證碼：

body { 
 
    background-color: #EEE; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.header { 
 
    height: 60px; 
 
    background-color: #FFF; 
 
    box-shadow: 0 0 3px rgba(0,0,0,.2); 
 
} 
 
.logo { 
 
    position: relative; 
 
    display: inline-block; 
 
    height: 40px ; 
 
    width: 100px ; 
 
    top:10px; 
 
    left: 10px; 
 
} 
 
.menu ul { 
 
    float: right; 
 
    padding: 0; 
 
    list-style-type: none; 
 
    margin-right:40px; 
 
    margin-top: auto; 
 
    margin-bottom:auto; 
 
} 
 
.menu ul li { 
 
    position: relative; 
 
    top: -15px; 
 
    display: inline; 
 
    padding:10px 20px; 
 
} 
 
.menu ul :hover { 
 
    background-color: red; 
 
} 
 
.menu ul li a { 
 
    text-decoration: none; 
 
}

<div class="header"> 
 
    <div class="logo"> 
 
    <img src="logo_new1.png" class="img"> 
 
    </div> 
 
    <div class="menu"> 
 
    <ul> 
 
     <li><a href="#">Home</a></li> 
 
     <li><a href="#">Activities</a></li> 
 
     <li><a href="#">About us</a></li> 
 
     <li><a href="#">Contacts</a></li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 1

此刻，你是不是徘徊在ul因爲你有ul和:hover因此被添加background:red所有兒童之間的空間當徘徊時ul（它們是li）的元素。這就是爲什麼你認爲它正在與ul，

這是你的代碼的實際產出

.menu ul *:hover {background:red} 

的:hover會影響padding如果該元素具有padding如果不是，它贏得了」不要再增加padding，所以如果你想有padding你必須:hover的li

body { 
 
    background-color: #EEE; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.header { 
 
    height: 60px; 
 
    background-color: #FFF; 
 
    box-shadow: 0 0 3px rgba(0, 0, 0, .2); 
 
} 
 
.logo { 
 
    position: relative; 
 
    display: inline-block; 
 
    height: 40px; 
 
    width: 100px; 
 
    top: 10px; 
 
    left: 10px; 
 
} 
 
.menu ul { 
 
    float: right; 
 
    padding: 0; 
 
    list-style-type: none; 
 
    margin-right: 40px; 
 
    margin-top: auto; 
 
    margin-bottom: auto; 
 
} 
 
.menu ul li { 
 
    position: relative; 
 
    top: -15px; 
 
    display: inline; 
 
    padding: 10px 20px; 
 
} 
 

 
.menu ul li a { 
 
    text-decoration: none; 
 
} 
 
.menu ul li:hover { 
 
    background-color: red; 
 
}

<div class="header"> 
 
    <div class="logo"> 
 
    <img src="logo_new1.png" class="img"> 
 
    </div> 
 
    <div class="menu"> 
 
    <ul> 
 
     <li><a href="#">Home</a> 
 
     </li> 
 
     <li><a href="#">Activities</a> 
 
     </li> 
 
     <li><a href="#">About us</a> 
 
     </li> 
 
     <li><a href="#">Contacts</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>