關於懸停的CSS菜單問題

Question

我有一個包含四個項目的菜單，每個菜單都有不同的顏色。

我的挑戰是將每個項目都放在懸停上，我知道我可以使用不透明度來實現此目的，但在此之前，每當我懸停在其中一個項目上時，它只突出顯示其中的一部分並跳過填充。我知道這是一個愚蠢的問題，但這是自1999年以來我的第一個前端工作:)

你能幫我理解這裏有什麼問題嗎？謝謝你們。

這是菜單結構

<div class="menu-bar-inner"> 
    <ul class="menu-bar-menu"> 
    <li class="color1"><a href="">Item 1</a></li> 
    <li class="color2"><a href="">Item 2</a></li> 
    <li class="color3"><a href="">Item 3</a></li> 
    <li class="color4"><a href="">Item 4</a></li> 
    </ul> 

，這是我的CSS

.menu-bar-menu li, .menu-bar-menu li a { 

list-style: none; 
float: left; 
padding: 6px 20px 7px 20px; 
text-align: center; 
text-decoration: none; 
color: #ffffff; 
font-size: 16px; 
font-weight: 400; 
background-color: #ce5043 
} 


.menu-bar-menu li a:hover { 
background-color: black; 
} 



.color1 {background-color: #ce5043} 
.color2 {background-color: #fb8521} 
.color3 {background-color: #444444} 
.color4 {background-color: #b3c833} 

Answer 1

我會帶填充關閉li元素，並把它放在a元素來代替。另外，請將a設置爲display: block;，因此它佔據了其父項li的整個高度和寬度。像這樣：

.menu-bar-menu li, .menu-bar-menu li a { 
     list-style: none; 
     float: left; 
     text-align: center; 
     text-decoration: none; 
     color: #ffffff; 
     font-size: 16px; 
     font-weight: 400; 
     background-color: #ce5043 
    } 

    .menu-bar-menu li a { 
     display: block; 
     padding: 10px 20px; 
    } 

這裏有一個小提琴：http://jsfiddle.net/82uyt/

而且，你失蹤收盤</div>標籤。

Answer 2

您可以用這個懸停：

.menu-bar-menu li:hover, .menu-bar-menu li:hover a { 
    background-color: black; 
} 

要花兩個li元素的關懷和其子錨定位時li懸空

演示：http://jsfiddle.net/DajQ9/1/

Answer 3

雖然有很多方法可以解決這個問題，但問題的根源在於，當您將li和li設置爲一個樣式時，您正在填充容器和其中的鏈接。你留下的是一個a標記，其中有填充的li內的填充，並且li標記的填充是不變的顏色。通過添加：

.menu-bar-menu li{ 
    padding:0; 
    margin:0; 
} 

你的聲明之後，就可以解決這個問題，或者乾脆單獨拿出你的聲明，使其更有點明顯。另外，如果有疑問，像Firefox的Firebug擴展工具將是您最好的朋友。您可以啓動它，然後單擊頁面中的某個項目，查看影響該確切項目的樣式...有時只是突出顯示/邊框，而您移動時足以讓您看到發生了什麼。

Answer 4

Yoy需要將填充應用於要應用懸停操作的元素。這裏是你的代碼更新。訪問此鏈接：http://jsfiddle.net/dnPmE/1/

CSS：

.menu-bar-menu li, .menu-bar-menu li a { 
    list-style: none; 
    float: left; 
    text-align: center; 
    text-decoration: none; 
    color: #ffffff; 
    font-size: 16px; 
    font-weight: 400; 
} 
.menu-bar-menu li a{ 
padding: 12px 40px 14px 40px;  
} 
.menu-bar-menu li a:hover { 
    background-color: black; 
} 
.color1 { 
    background: #ce5043; 
} 
.color2 { 
    background: #fb8521; 
} 
.color3 { 
    background: #444444; 
} 
.color4 { 
    background: #b3c833; 
}