2010-09-12 89 views
0

我在我的網站中創建了一個水平菜單,一切都正常但只有一件事。我有一個鏈接在每個<li>和顏色設置爲白色和li沒有背景,但在懸停我想設置li背景爲白色和鏈接文字顏色爲黑色。問題是<a>標籤的寬度與<li>不一樣,並且當鼠標位於<li>而不是<a>的部分上時,它們都變爲白色。就我所知,錨鏈接不能具有寬度屬性,而我嘗試不同類型的技巧,但沒有成功。任何想法?嵌套在li中的錨鏈接

#primary-menu ul li { 
    list-style-type: none; 
    float: left; 
    background-image: url('menu-sep.png'); 
    background-repeat: no-repeat; 
    background-position: right; 
} 

#primary-menu li a:hover { 
    color: black; 
} 

#primary-menu li:hover { 
    background-color: white; 
    color: black; 
} 
#primary-menu li a { 
    color: white; 
    text-decoration: none; 
    padding-right: 8px; 
    margin-right: 8px; 
    width: 100%; 
    height: 23px; 
} 

`

回答

0

怎麼寫,上面應該工作,但你說的不工作,然後通過使refered像純文本類的嘗試。

.liText 
{ 
color:white; 
} 

.liText:hover 
{ 
color:black; 
} 

希望這會起作用。

使用class屬性與您的標記。 像

<a class="liText"> // for single class 

,如果你想使用兩個或多個類的一個標籤,然後我下面提到給予空間後使用另一個類。

<a class="firstClass SecClass ThirdClass"> 
2

檢查您的<li>樣式。他們可能有填充。將其移除,錨點應占據整個可用空間。另外,將<a>標記的邊距更改爲填充。填充作爲標籤的一部分(即,在填充上盤旋使其觸發:hover假選擇器),而邊距則不是。