菜單a：懸停 - 試圖讓整個酒吧的背景顏色

我想把a：懸停在我創建的菜單上。如果你能幫助我，我真的很感激！我試圖實現的是在整個酒吧中獲得黑色。如果你明白我的意思。菜單a：懸停 - 試圖讓整個酒吧的背景顏色

這是菜單：（黑色是懸停） enter image description here

因此，這裏是我的菜單CSS：

#navigation { 
padding: 5px; 
height: 1em; 
width: auto; 
text-align: center; 
font-family: Verdana; 
font-size: 12px; 
text-transform: uppercase; 
margin-top: -5px; 
} 

#navigation ul { 
background-color: #fff; 
width: 1000px; 
margin-left: -5px; 
} 

#navigation li { 
float: left; 
list-style: none; 
width: 100px; 
background-color: #fff; 
padding: 10px; 
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.235), 0px 0px 5px rgba(0, 0, 0, 0.047); 
} 

#navigation li ul { 
padding: 5px; 
display: none; 
width: em; 
background-color: #fff; 
} 

#navigation li a:hover { 
background-color: #000; 
padding:10px; 
width: 300px; 
color: #fff; 
position:absolute; 
} 

#navigation a { 
color: #000; 
-webkit-transition: all 0.4s ease-in-out; 
-o-transition: all 0.4s ease-in-out; 
-ms-transition: all 0.4s ease-in-out; 
transition: all 0.4s ease-in-out; 
} 

#navigation a:link {  
color: #000; 
} 

#navigation a:hover { 
color: #fff; 
background-color: #000; 
} 

#navigation a:visited { 
color: #000; 
}

因此，如果您需要了解更多信息，只需訪問我的網站你可以在那裏看到問題。 http://tomaswebdesign.com

來源

2012-11-24 Tomas Rekstad

在您的問題中發佈相關的HTML *此處*，否則一旦問題解決，最好變爲無用（或最可能無意義）。考慮發佈[實時演示]（http://jsfiddle.net/）供我們進行試驗，並查看實際的代碼。讓它*容易*爲我們*幫助*你。 –

現在問題已解決。我使用了li：hover，a：來自David Thomas的懸停代碼。但我必須刪除-webkit轉換。我可以嘗試做一個現場演示。但我正在使用weebly，所以在HTML中只有{menu}沒有

LINK

。但我會嘗試做一個演示！ –

你有兩個選擇，第一個是最簡單的，只需添加:hover到li本身：

li:hover, 
a:hover { 
    color: #fff; 
    background-color: #000; 
}

JS Fiddle demo。對於上述方案，我也建議（如包含在鏈接演示），您的a元素（a:hover下不）上設置color: inherit

二是風格的a作爲一個塊級元素：

a { 
    display: block; /* to fill the available horizontal space */ 
    height: 100%; /* to fill the available vertical space */ 
}

這並不需要你從li元素去掉padding不過，因爲那是什麼「逼」的background-color遠離元件的邊緣，所以：

li { 
    padding: 0; 
} 

li a { 
    padding: 10px; /* so that the padding is preserved, albeit 
         on the a element instead */ 
    display: block; 
    height: 100%; 
}

JS Fiddle demo。

來源

2012-11-24 12:23:58

試試這個

#navigation li { 
    display:block; 
    float: left; 
    list-style: none; 
    width: 100px; 
    background-color: #fff; 
    padding: 10px; 
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.235), 0px 0px 5px rgba(0, 0, 0, 0.047); 
}

或者你也可以設置錨width和height至100％。

來源

2012-11-24 12:28:52 Milind

菜單a：懸停 - 試圖讓整個酒吧的背景顏色

回答

相關問題