背景顏色不顯示在懸停上

我正在研究一種新的響應式設計，我遇到了一個我無法弄清楚的菜單問題。基本上，我想讓菜單項的背景在您將鼠標懸停在上方時變成白色，並且文字變成藍色。現在，文字變成藍色，但背景不會變白。背景顏色不顯示在懸停上

HTML代碼：

<div class="header"> 
    <div class="header_content"> 
    <div class="logo"> 
     <img src="images/new_logo.png" class="hdr_logo"> 
    </div> 
    <div class="main_menu"> 
     <ul> 
     <li>ABOUT US</li> 
     <li>OPERATIONS BRANCH</li> 
     <li>LOGISTICS BRANCH</li> 
     <li style="border-right:0;">COMMUNITY</li> 
     </ul> 
    </div> 
    </div> 
</div>

CSS：

.header { 
    background: url('images/header2.png') repeat-x top left; 
    width: 100%; 
    height: 150px; 
    color: #FFF; 
    margin: 0; 
    padding: 0; 
    } 

    .header_content { 
    width: 960px; 
    margin: 0 auto; 
    height: 150px; 
    padding: 0; 
    } 

    .logo { 
    float:left; 
    width:120px; 
    } 

    .main_menu { 
    float:left; 
    height: 30px; 
    margin-top: 120px; 
    line-height: 30px; 
    padding: 0; 
    width: 830px; 
    } 

    .main_menu ul { 
    list-style-type: none; 
    padding: 0; 
    margin: 0; 
    text-align: center; 
    overflow: hidden; 
    height: 30px; 
    } 

    .main_menu li { 
    float: left; 
    border-right: 1px solid #FFF; 
    text-align: center; 
    padding: 0; 
    margin: 0; 
    padding-left: 2%; 
    padding-right: 2%; 
    overflow: hidden; 
    height: 30px; 
    cursor: pointer; 
    } 

    .main_menu li:hover { 
    background-image: none; 
    background-color: #FFF; 
    color: rgb(33,47,57); 
    }

編輯：問題解決

的浮動李不是一個塊元素，所以你不能改變它的背景顏色。只要我將display:block;添加到li，它就解決了這個問題。

來源

2013-02-05 ChrisD

出於好奇，是否有一個原因，你使用的顏色代碼混合在十六進制格式和RGB格式？ –

由於這是一個導航，請嘗試在列表項中添加鏈接，並在CSS中選擇它們而不是** li **本身：'.main_menu a：hover {...} – kleinfreund

似乎爲我工作的罰款：http://jsfiddle.net/s3JT9/

.main_menu li:hover { 
background-image: none; 
background-color: #FFF; 
color: red; 
}

我改變了顏色以紅色來說明。

來源

2013-02-05 18:21:46 DeweyOx

背景顏色不顯示在懸停上

回答

相關問題